Some CSS reminders
Here are some things to keep in mind when building CSS sites
Image Replacement
The first rule to bear in mind is simply this. Whenever replacing the text in a header tag with a background image remember, since we loose the alt="" capability, we must place the title="" element within the tag
The following site lists all the variations of Image Replacement techniques mezzoblue.com but here are a few key points
This one is my current favorite, even if it does require the extra span tag
/* html */
<h3 id="header" title="ALTTEXT"> <span>Revised Image Replacement</span></h3>
/* css */
#header { width: 329px; height: 25px; background-image: url(sample-opaque.gif); }
#header span { display: block; width: 0; height: 0; overflow: hidden; }
The following code, the Gilder/Levin Method, is nice when you have an opaque image which will always cover the text entirely:
/* html */
<h3 id="header" title="ALTTEXT"> <span></span>Revised Image Replacement </h3>
/* css */
#header { width: 329px; height: 25px; position: relative; }
#header span { background: url(imagename.gif) no-repeat; position: absolute; width: 100%; height: 100%;
This one, Phark Revisited, I like because it basically just shifts the text off screen and removes the need for extra spans
/* html */
<h3 id="header" title="ALTTEXT"> Revised Image Replacement</h3>
/* css */
#header { text-indent: -5000px; background: url(imagename.gif); height: 25px; }