Using CSS to replace text with images | August 6, 2003

When building the new message website I decided to use the Fahrner Image Replacement technique in combination with a list of links and the use of pure CSS rollovers to handle the site nav.

For those not familiar with the FIR technique, it basically involves hiding some text using display:none and then setting a background image to take the place of this text. It means that browsers supporting the CSS get to see a nice image version of some text, while those that don't get served up the text as is. It does require the page to be written especially for this method because it requires the use of a redundant span tag. However it seemed to work pretty well.

Then on one of the many lists I belong to today, there was a big discussion about the various pro's and cons of using this method. It turned out that Seamus Leahy and Stuart Langridge both came up with an alternative image replacement method which uses overflow:hidden and doesn't require the redundant span. It involves using the box model hack to work in IE5 but seems like a good idea. It means you can apply this to sites without having to change the underlying code, which is always a bonus.

I was thinking of using one of these techniques to handle the nav on this site. However when getting feedback on the message site, somebody mentioned that they surf a lot with images off (because they use GPRS and it saves them money on bandwidth) and they could not see the navigation. I don't suppose that a huge proportion of people do this. However it renders the nav useless so doesn't really follow the "degrades nicely" rule I tend to use.

So I guess I'm going to stick to using nav bar images on this site for now. It means I probably won't be able to do any clever style switching for the mo but I guess I'll cross that bridge when it comes.

Posted at August 6, 2003 7:52 PM

Comments

Matthew Farrand said on August 9, 2003 7:52 PM

Tom Gilder’s blog shows how the problem of turning images off and leaving CSS on can be solved http://blog.tom.me.uk/2003/08/07/gilder_image_transform_technique.php

Andy said on August 11, 2003 11:15 PM

Cool, will check that out.