Posted by Chris Hester on 29 November 2004

Things get even weirder when you style the LI tags instead. All three versions of IE drop the bullets or numbers down to the bottom of each line! Worse, IE 5.0 puts them out of line by a few pixels. All three browsers also fail to count numbered lists, giving '1' for every list item. Lists are seriously buggy in IE!

Posted by Sean Powell on 7 December 2004

The issue here is that the width collapses the default padding. It's still there, but the ol/ul box prevents it from displaying. The solution is just to add the padding back in, like this:

.test { width:270px; }
.solution { padding-left:30px; margin-left:10px; }

Notes:
1. You now have the box model to deal with if width is an issue and you are rendering in strict mode.
2. The margin is merely to maintain the default spacing that would normally occur.

Code posted at http://www.pdgmedia.com/code/olwidth.html

Posted by dexus on 31 January 2005

like Sean Powell said:
if you give width (or height) to the LI, they will all be numbered with 1.

I've tried to fix that bug with .htc :
http://www.dexus.nl/tips/ol/ (dutch)

so you just ad this:
ol { behavior: url("ol.htc") }
to your css file.

and you put ol.htc in the same folder or change the url. and IE will render like it should.

here you can download ol.htc:
http://www.dexus.nl/tips/ol/ol.htc

I do not have a better solution at the moment. So javascript must be enabled to make this work.

greetz
dexus

Posted by Gérard Talbot on 29 September 2005

Strictly speaking, I do not believe this is a bug. MSIE 6 simply applies default css rules to ol, ul and li while other browsers apply their own css rules for these elements. Here's the conclusion of a DevEdge article on the issue:

"In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation."

http://developer.mozilla.org/en/docs/Consistent_List_Indentation