How Internet Explorer Handles Lists (ul and ol)

Microsoft Internet Explorer (at least versions prior to 7) seems to have some annoying bugs concerning lists in HTML.

  1. 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:
  2. 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.

2 Responses to “How Internet Explorer Handles Lists (ul and ol)”

  1. HKK says:

    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

  2. admin says:

    Thanks for the hint! 🙂

Leave a Reply

Your Data

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

What do you want to say?