List marker placement in IE

The Setup

On a page I'm working on, I recently ran into a problem where IE6 suddenly deecides to align list markers with the bottom of multi-line lists, instead of the top. This is really pissing me off, so voila! A test case.

  1. This is a list item. It should only be one line
  2. This is another list item. Once again, just one line
  3. Oooooh. And here's the fun one. A list item that wraps to two lines. Using a line break to get
    this to happen.
    Maybe I'm using more than one.
    Either way. Here's the damn thing
  4. Then, with an image set to display:block in the mix:

And now, the solution

The bug is apparently triggered when a list item in an ordered list has a hasLayout trigger and one of the list items contains a block-level element. The fix? Remove the hasLayout trigger on the list items with height:auto.

  1. This is a list item. It should only be one line
  2. This is another list item. Once again, just one line
  3. Oooooh. And here's the fun one. A list item that wraps to two lines. Using a line break to get
    this to happen.
    Maybe I'm using more than one.
    Either way. Here's the damn thing
  4. Then, with an image set to display:block in the mix:
Return to the Toxic Wombat Home Page