This is, without a doubt, the strangest IE 6 bug that I’ve ever encountered (and, I’ve encountered just about every one). Here’s the gist of it: when a list item (<li>) in an ordered list (<ol>) has layout, it can’t keep track of it’s correct number any more. That’s right: every item in an ordered list will be item 1. Insane.

How do you get this crazy behavior? Do things like give an <li> width or height. Due to IE’6 wonky list rendering in general, it will also probably no longer display the number indicator entirely, but this can be fixed by using list-style-position:inside or giving the <ol> in question some margin-left. Once that number displays, if it wasn’t already, it will be "1." Over and over and over again.

How can you combat this bug? Well, you can give width to the parent <ol> and use padding to acheive the width you’d like. (Also, you’ll probably need to give the parent <ol> some negative left margin to combat the crazy margin you’ll need to use to get the list item numbers to display in the first place).

Confusing? Yes. Just remember: width and height on <li> tags can lead to strange behavior in IE6.

technorati tags:ie6, browserbugs, cross-browser

This entry was posted on Wednesday, January 31st, 2007 at 4:52 pm and is filed under code, css. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.