Microsoft Internet Explorer (at least versions prior to 7) seems to have some annoying bugs concerning lists in HTML.
- Problem: Margin between list items (“li”). If you set the margin of a list item to 0px in CSS, IE will still show a gap between the list items.
Fix: Set a width for the list item (“li”) and the list itself (“ul”, “ol”). 100% will do the trick in most cases.
The margin issue is fixed by this but it leads us to the next problem: - Problem: When you set a width for a list item in an ordered, that is, numbered list (“ol”), Internet Explorer won’t count properly anymore.
Fix: I don’t know any.
Hi, I just ran into problem no. 2 (with IE7): when a width for an OL was specified, it didnt display the numbers at all. (IE8 renders it correctly though)
Easy fix: surround the OL with a DIV and give the DIV the desired width — the OL will then just fit into it and have the same width also (assuming the DIV doesnt have any padding applied)
~HKK
Thanks for the hint!