Stupid CSS

I’ve been wrestling with CSS bugs over the past three days while trying to hone a design, but the strangest one was finding out that two popular image replacement techniques (1, 2) don’t work in mac IE 5 if you use anything besides a heading element to hide your text.

So:

<h1 id=”logo”>logo text</h1>

will hide the “logo text” and replace with an image, but:

<div id=”logo”>logo text</div>

will not. Makes no sense and prevents me from using it on a public site, since I no longer want to use headers to describe logos.

Try this test page in Mac IE 5 to see the bug.

update: yeah! a fix!