Some ancient HTML tags have been deprecated. You should not use them any more because there are excellent CSS equivalents.
font
You don't need <FONT>. Instead, use:
body {
font: 0.8em verdana,sans-serif;
}
There are some issues with font sizes in table cells, though, so to be completely on the safe side you could extend this declaration to all common text containers.
body,td,li,p {
font: 0.8em verdana,sans-serif;
}
Spacer GIFs
We can say goodbye to the ugliest HTML construct ever conceived— spacer GIFs are no longer necessary. Their purpose was to stretch up table cells to a certain minimum width, and they were inextricably intertwined with the hideous table constructs we used in the bad old days. Besides, when you use one spacer GIF you're seduced into using three dozen more and spawn bloat code like;
<tr><td rowspan=7 width=10><img src="pix/spacer.gif" height=150 width=1> </td><td width=150><font face=obscurica size=7>Welcome to my beautiful site <td colspan=4 height=17><img src="pix/spacer.gif height=1 width=23></td></tr>
Nowadays CSS offers far superior ways to set the widths of all elements. If you think a spacer GIF is the only solution for a certain problem, it's time to upgrade your CSS knowledge a bit. Again, you should ask from help, from www.css-discuss.org if you can't do it on your own. You're not the first one traveling along this path.
center
The ancient <CENTER> tag can safely retire, too. CSS is quite capable of centering text and blocks of content, though there's one catch.
To center the text in div.text you do:
div.text {
text-align: center;
}
Centering entire blocks is somewhat trickier. If you want to center the entire div.text, the official CSS way is:
div.text {
margin-left: auto;
margin-right: auto;
}
auto means: “as much as you need.” The <div> takes as much margin as it needs and equally divides it between left and right. As a result it is centered.
Unfortunately the auto value does not work in Explorer for Windows. Instead, you must use text-align on a block containing div.text:
div.container {
text-align: center;
}
div.text {
margin-left: auto;
margin-right: auto;
text-align: left; /* overrule inheritance */
}
<div class="container">
<div class="text">
This entire block is centered
</div>
</div>
This use of text-align is not quite standards-compatible, but it's the only way to make Explorer for Windows behave. And yes, it's one of the very few cases where divitis and classitis are good for your page.