bug 338 - Ordered lists with CSS break in IE

Issue: #338
Affects: IE6, IE7, IE8 Beta 1, IE8 Beta2, IE8 PR1, IE8 RC1

The ordered list element <ol> in HTML allows developers to present an ordered list of items. Believe it or not, 1 (one) CSS property can make it render as:
1,1,1,1,1,1,1,1,1,1 (in fact you'll never get a 2!)

You don't believe me, do you? ;-) I'm not surprised I still can't believe it.

check out the example list below in any non-IE browser, and you will see the numbers 1,2,3,...8,9,10. View the exact same page in IE (6 or 7), and you will only get 1,1,1,...1,1,1.


Example 1:

Sorry, the blogger software is making this bug not appear. I'm going to find a remote host for the sample file soon. - thanks.

Update: A sample file is now hosted remotely here. http://www.filemonster.net/en/file/8663/IE-OrderedListBug-html.html

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

All you need to do, to get IE to break, is set the CSS width property on the OL element, and the LI elements (inline or in a CSS selector/class.

But wait! there's more!, if you don't add the CSS width to the LI elements, just the OL element, you get this, the "Chris Angel" Ordered List, where ALL the numbers disappear!

Example 2:

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

Known Workarounds: None.

Related Issues: None.