When you apply a width to an ol or ul, Explorer Windows secretly applies more rules. Moreover, 5.0, 5.5 and 6.0 each apply different rules.
(note: This bug is very similar, but not identical, to Ordered list rendering with width on LIs.)
Test page. Workaround is not included.
Reported by ppk.
Explorer 5-6 Windows, Explorer 7 | Reported on 26 November 2004.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by Sean Powell on 7 December 2004 | Permalink
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
3 Posted by dexus on 31 January 2005 | Permalink
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
4 Posted by Gérard Talbot on 29 September 2005 | Permalink
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
5 Posted by Thomas Hoffmann on 23 August 2006 | Permalink
Another easy fix is to place the ol or ul within a div that has a set width. You can't specify the width for the ol, ul, or li; but you can put it in something that has a width specification.
6 Posted by Nicolae Rusan on 14 March 2007 | Permalink
I tried the border bottom fix suggested by Thomas, and I found it works better than the height fix... since that is no valid CSS (is it?), and shouldn't design only for IE (damn you Microsoft)... word up on that fix
1 Posted by Chris Hester on 29 November 2004 | Permalink
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!