H8 image replacement

[harbingerOTV]

I know it's been a topic all over the place. I have tried several techniques so I'm not sure if this way has already been tried or not. I know a lot of the techniques fail in certain browsers and all those browser specific techniques are well and good but...

If you all could do me the favor and test it out on other browsers just to see how it works, it would be appreciated.

image replacement test

So far it works on:

IE 6
Mozilla 1.7.5
Firefox 1.0.2

[brothercake]

It works in Opera 8, but it fails the images on / CSS off situation

[ronaldb66]

... and has superfluous markup.

[AaronW]

http://www.mezzoblue.com/tests/revis...e-replacement/

I prefer Phark Revisited:

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	text-indent: -5000px;
	background: url(sample-opaque.gif);
	height: 25px;
	}

Yours has an extra tag (an empty span, even!) and the CSS for it is rather bulky. Despite all that, it still doesn't solve the images off/css on issue. The Gilder/Levin and the Shea Enhancement method (which use the same markup as yours) do.