IE6 bullet aligned to bottom of list-item (LI)

Jason C — Thu, 18 Sep 2008 12:43:00 +0000

I just thought I’d jot this down for posterity as I’ve seen it before but not often enough for me to remember the solution. Posting this should help that, though.

When using LI in IE6, if the LI has hasLayout activated, then the corresponding bullet will be aligned to the bottom of the item instead of the top. Why the devs writing IE6 thought that this would be useful I don’t know. Or perhaps, it’s a bug? The shock of it all.

The solution is to target the LI and to disable hasLayout. The method I used today was this:

li {zoom:0;}

This directly countermands the zoom:1; I had added to other elements to get the page to hang together in IE6.

solution #2

Jason C — Wed, 20 Feb 2008 09:55:00 +0000

It seems that there is more than one way to skin a cat. Ages ago I wrote about a mad IE duplicating text bug that would repeat bits of content lower down on the page. It had me scratching my head for a little while wondering how IE could be home to yet another bug, especially one this weird. My old friend Google came to the rescue in the end, showing me a cure.

Now though there appears to be a new and even simpler cure. The problem occurs when you have two floats, and comments between them. The solution I used previously was to remove the comments, but now it appears that another fix is simply to add display:inline to the css rule for the floats. I pretty much do that automatically now, to avoid IE doubling the margin around floats, so it fits right in, and means I can forget about removing comments from my code.

Antanova Ltd. » ie6

IE6 bullet aligned to bottom of list-item (LI)

solution #2