This is as days pass by, by Stuart Langridge

And this is New CSS image replacement technique, written , and concerning Uncategorized

I like the Fahrner image replacement technique to replace text with images using CSS, but I don't like how you have to put spurious span tags in your HTML to get it to work. So, here's a different technique that has the same effect but doesn't require the extra meaningless tags: My image replacement technique

Comments

Levin

it actually is possible to make the text visible if images are switched off.http://levin.grundeis.net/files/20030809/alternatefir.html

sil

Yeah, sorry Tom, the comments here need me to kick them in the arse to shape up. Just haven’t had time. You are, er, not the first to complain about it. :-)I never thought of text-indent. Sneaky.

Tom Gilder

Whoops! Sorry, comment didn’t submit for about 5 minutes :)

Tom Gilder

You can also use text-indent:-10000em, which I think won’t have problems in IE5/win, but does still have the problem with images disabled. There are ways round that however…

Tom

You can also use text-indent:-10000em, which I think won’t have problems in IE5/win.

sil

Hm. Jim’s point about surfing without images is a good one, I admit. I’m not convinced that you can address this point, though; I assume that the argument against using a CSS replacement technique is that if your image is in the HTML then it will have an alt attribute? Should CSS provide alternate text for background images?

Jim Dabell

Sadly, it doesn’t address the other problem with Fahrner’s technique: what happens when you are surfing with a normal browser with images switched off.

Simon

Brilliant. Not only does it remove the span tag but it also fixes the other major problem with Fahrner’s technique: display: block is followed by some screen readers, which results in them not reading out the header. With your technique that won’t happen.

Ronaldo

Very, very nice! It will be particularly useful in my next redesign :-)

ncompass

This works for titles, but what if you want to use a product logo within normal text, i.e. replacing a word with an image within a nnormal paragraph. Just an idea

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.