Note: to view the examples in this article, you need to view it with Internet Explorer 6.0, which is the only browser in which this bug occurs.

While working on a project I ran a cross a weird CSS bug. Well, at least it’s weird to me. While creating an unordered list navigation system (like a good little webmonkey), I noticed that each button was displaying an extra 2 pixels of space after each <li> item.

Everything started just fine. I created my unordered list:@import “/css/displayquirk/quirk.css”;

No sweat. The problem comes when I try to wrap the text in <span> tags so that I can replace the text with a background image. So, I add a line of css to suppress the display of the link text like so: li a span{display:none;}. That’s when I get these weird extra spaces in IE6:

So, after a few hours of teeth grinding, I remembered that there is a new article at A List Apart that talks about the Farhner image replacement method. Perhaps it could enlighten me. Indeed it did. I was not familiar with the visibility:hidden property. So I thought “hey, what do I have to lose?” Really that’s what I thought. I even said it out loud. Sure enough, after replacing display:none with visibility:hidden, all my problems were solved.

So what’s going on here? I haven’t a clue, but this seems to solve the problem.