Accessible Header Images With CSS And XHTML

Overflow

So far, the code will work fine as long as the header text is short enough to fit underneath the header image.

When text is too long to fit inside its container, it is said to “overflow" out of it. We don't want to see this text, so we have to hide it. In fact, this is exactly the CSS we need:

h1 { overflow: hidden }

If you only worry about Windows browsers, the story ends here. Everyone else has one more crime to commit. With this naked code, Internet Explorer 5 for the Mac will hide the whole thing. Not just the overflow—the whole thing is gone. Poof!

This is a problem specific to IE5 for Mac. Thankfully, a simple hack will let us hide the line above from IE5 for Mac, and give it to everyone else.

What shall we give those Mac users instead? Simple: we'll use Mike's solution from before. Here's the two-part hack:

/* IE5 Mac Hack \*/  
h1 { overflow: hidden; }  
/*/  
h1 { text-indent: -100em; }  
/* End Hack */

The first line is given to all browsers except IE5 for Mac. On the other hand, IE5 for Mac only sees the second line. Learn more about the hack at Sam Foster's site.

Summing Up

We started with perfect XHTML and perfect CSS. Then we made concessions to browser support.

Now we have two methods for styling headers fully using CSS, one with clean XHTML, and one that still works without images.

I'll leave it up to you decide which is more important for your site.

XHTML-Centric header

<h1 id="album">My photo album</h1>    
#album {  
 width: 300px; height: 75px;  
 background-image: url(header.gif);  
 background-repeat: no-repeat;  
}  
h1 { text-indent: -100em; }

User-Centric Header

<h1 id="album"><span></span>My photo album</h1>    
/* repeated code per header */  
#album, #album span {  
 width: 300px; height: 75px;  
 background-image: url(header.gif);  
 background-repeat: no-repeat;  
}  
#album span { margin-bottom: -75px; }  
/* non-repeated code */  
h1 span {  
 display: block;  
 position: relative;  
 z-index: 1;  
}  
/* IE5 Mac Hack \*/  
h1 { overflow: hidden; }  
/*/  
h1 { text-indent: -100em; }  
/* End Hack */

Learn More

• Negative text-indent method: Mike Rundle http://phark.typepad.com/phark/2003/08/accessible_imag.html
• The original FIR: Doug Bowman http://www.stopdesign.com/also/articles/replace_text/
• More methods:
  • Seamus Leahy http://www.moronicbajebus.com/playground/cssplay/image-replacement/
  • Stuart Langridge http://www.kryogenix.org/code/browser/lir/

• Other useful links:
  
  • Sam Foster's IE5 Mac Hack http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html
  • The W3C on CSS http://www.w3.org/Style/CSS/
  • W3C CSS Validator http://jigsaw.w3.org/css-validator/
  • Half a million paths to CSS http://www.google.com/search?q=css