This is

as days pass by, by Stuart Langridge

. Here I write about many things. In the past I wrote about other things but the past is past. I write code for people to play with, I write about my life on Twitter, and I write here.

On I wrote New CSS image replacement technique, on the subject of 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

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.