Sunday, November 11, 2007

IE6 Menu List Item Spacing Nightmare SOLVED (border-top)

So I was working on a new menu system for yesterday. Typically, I get everything looking great in Firefox, and then spot check in IE so that I can begin the torture.

And there it is, the well-documented IE6 LI spacing bug, staring me in the face.

Though, just recently I'd made up an example list item menu and it didn't have this problem, so I wondered WTF. I began researching and came across this gem of a solution ( from A List Apart, and many other sites echoed this as the way to fix things. So I selected the text block and removed lines, and lo and behold, it works. But goddamn, why? And why was my simple example not exhibiting this behavior?

So I went, line by line, trying to figure out how to cause this bug. Trying to find the thing that would trigger the rendering problem. I was just sure it had to be some weird character my editor was inserting, or maybe when I saved the file, I was causing it unwittingly. But no, it all comes down to the fact that I was using border-top to try and get some nice bordering.

Here's the relevant CSS:
#navbar li ul li {
float: none;
border-top: 1px solid #ccc; /* BLIMEY, IT'S YOU - BASTARD! */

Simply changing that border-top to border-bottom, or removing it entirely, fixes the IE6 render issue. Not very intuitive eh? Try looking at this page in IE 6 and you'll see what I mean.

Good (no border-top)

Bad (w/ border-top)

No comments: