Text table-based banners ( How-To )

[topsites]

I recently came upon this as I was reducing image overhead on my site to reduce load-times. I understood the concept of making a basic text-banner via a table but wanted something more competitive and inline with an image-based logo, alas, without the use of said images.

I came up with the first one, a mozilla-explorer cross-browser compatible look:
Notes: inset blue <- can be modified to outset, while blue is the color, can be changed to #000000 or whatever. navy and black are also colors.
Furthermore, the 50 is a percent, can be adjusted from 0-100 for less/more transparency, here goes code:

<table width="468"><tr><td align="center"
style="border: 6px inset blue;
background-color: navy;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;">
<font size="7" color="#BFFFFF">Your Site Title</font>
</td></tr></table>

That first example works nicely with a colored background image, especially if the colors of the table cell blend.
But, it's not so nice in all environments, and I wanted more... Honestly, I wanted a gradient cell.

Unfortunately, the only thing I could find was MSIE only, thou it renders a transparent background in Mozilla, the gradient look is out of this world (also works with buttons):

<table width="468"><tr><td align="center"
style="border: 6px inset blue;
background-color: transparent;
FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=2,
STARTCOLORSTR='navy', ENDCOLORSTR='black');">
<font size="7" color="#BFFFFF">Your Site Title</font>
</td></tr></table>

GradientType can be either 0, 1, or 2 - For different effects. And yes, navy and black are colors.

It'd be neat if other people had some cool ideas, I get tired of serving megs of images.
Hope it helps someone....

[topsites]

Ahhh... I found a smooth IE-Moz combo:
It looks one way in Ie and another in moz, but the colors are a smoother blend... :)

<table width="468"><tr><td align="center"
style="border: 6px outset navy;
background-color: #000062;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=0,
STARTCOLORSTR='navy', ENDCOLORSTR='black');">
<font size="7" color="#BFFFFF">Your Site Title</font>
</td></tr></table>

p.s.: adjust the 6px to a smaller number for a lesser border, larger for more.

Now ... How to create a gradient-color horizontal line without the use of an image..?

[topsites]

Main page load time Test results:

Load Time by Connection Speed
Connection / Download Time
14.4Kbps / 7.93 seconds
28.8Kbps / 4.96 seconds
56Kbps / 3.51 seconds
Cable / 2.17 seconds

I always said text works best.