CSS: Tevi’s Hackless Image Replacement Technique, ‘THIRT’
CSS Image Replacement - the purpose: style textual content with a background image, and visually remove the text, so we see the image in stead. The text is still there in the code, readable by search engines, screen readers, or any browser that does not support CSS (text-based, like some handheld ‘puters).
None of the methods out there satisfied me. There was extraneous code being written, whether it be extra span tags, or funny hacks to get it to work in some less-compliant browsers. A major downside to the common Fahrner Image Replacement technique, where you hide the text inside a span tag with display: none; is this is not very helpful: the text is not being read by screen readers! (Search engines - as of the writing of this article - do pick up the span content as long as the css is being written and linked from an external style sheet.)
Stuart Langridge and Seamus Leahy came up with an “almost there” approach. Check out Stuart’s link:
http://www.kryogenix.org/code/browser/lir/. The basic technique is to bump text out of the viewable area of a div with top-padding and by setting the height of the div to “0″. No extra markup, all css, accessible, beautiful. However, in order to get this work with early versions of IE, due to their incorrect box model, is to hack the code.
I try to avoid hacks. And, so, without further ado, I present you with ‘THIRT’! ‘Tevi’s Hackless Image Replacement Technique’!
It’s simple: bump the text out of view with excessive line-height! Keep padding at 0, and set the height of the div as you want it. Line height to 3 or 4 times the actual height, overflow: hidden, and bam! Ok. here it is broken down. Sorry for my excitement.
ul#topnav a#blog {
display: block;
height: 100px;
width: 41px;
background-image: url('/images/nav-blog.png');
line-height: 330px;
overflow: hidden;
}
Going through the code above, line by line:
- Set your div, or in this case anchor to “display: block” so you can safely set dimensions on it.
- Declare your height and width. (Out loud is not necessary)
- Your background image - the image which we will see in place of the text (you may want to do background-position or no-repeat, as well)
- your very excessive line-height attribute. This is what makes this technique work! Make sure it is very excessive!
- overflow: hidden; is actually what makes this work. Do this, and your text will be safely out of view!
