Nested lists bug

Posted on 26 August 2006 (02:59 PM)

I found me a quirk today! When implementing my search page, I noticed an awkward bug in Internet Explorer 6 and 7. It's got to do with nested lists in the first list-item. Read on for an example and a solution.

The missing number

Check out the following ordered list in IE and, for instance, Firefox:

  1. Beer
    An alcoholic beverage
  2. Coffee
    A hot, black beverage
  3. Orange juice
    A fresh, orange beverage

You see? IE doesn't show the number preceding the first list-item! The same goes for the bullets in unordered lists by the way.

This strange behaviour only occurs when the first child of the list-item is a list. It occurs with any list, ordered, unordered and definition lists. It can be solved by putting any element before the nested list. It may even be a text-node. The example below shows the same list, only with the letter "A" preceding the nested dl.

  1. A
    Beer
    An alcoholic beverage
  2. Coffee
    A hot, black beverage
  3. Orange juice
    A fresh, orange beverage

As you can see, the first list-item has its number back. Note: I've used the letter "A" here for clarity, but it might as wel be a no-break space ( ).

Extra markup sucks

  is of course not a very heavy load of extra markup, but it isn't supposed to be there either, not to speak of empty span-elements, for instance. Still, something has to precede the nested list. Therefore, in my first solution I used Conditional Comments to send an empty span-element to Explorer only. I found an even better solution by accident actually, when I was trying to prevend the nested list from starting on a new line in IE.

The solution

It's dead simple really, adding the following style rules solves the problem:

  1. li dl,
  2. li ul,
  3. li ol {
  4. display: inline;
  5. }
  6. Download this code: /code/nested_lists_bug1.txt

Last but not least, view source for the proof:

  1. Beer
    An alcoholic beverage
  2. Coffee
    A hot, black beverage
  3. Orange juice
    A fresh, orange beverage

Edit: it's not over yet...

I have been testing some more, and unfortunately, the following combination of nested lists is not fixed by the solution above...

  1. <ol>
  2. <li><ul><li>Item</li></ul></li>
  3. <li><ul><li>Item</li></ul></li>
  4. </ol>
  5. Download this code: /code/nested_lists_bug2.txt

...instead, it screws up the numbering completely, giving both list-items a number 1. Adding a preceding element (in my test-case an empty span) works, but only when the display: inline rule is not applied, leaving you with nested lists that start on a new line.

Of course this is not always bad, but I couldn't tell you how to solve it. I've tried different things, but strange things keep happening. Adding some text (or again, a  ) even turns the nested unordered list into an ordered list, which should manually be changed back using the CSS rule ol li ul { list-style-type: disc; }. This sounds like a solution, but again, it bumps the nested list down a line (also in Firefox).

Too bad! I would like to hear about a solution, if any. I've run out of ideas.

Back to top

Filed under HTML and CSS

Comments:

  1. 28 August 2006 (12:00 PM) by Webby

    When i use doctype HTML instead of XHTML Ie does get it right: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    And about the second issue, see this (non-english) article: http://www.giga...5/de-ie-ol-bug/

    this comment has been quoted by Harmen Janssen

  2. 28 August 2006 (02:00 PM) by Harmen Janssen

    Webby wrote:

    When i use doctype HTML instead of XHTML Ie does get it right:

    And about the second issue, see this (non-english) article: http://www.gigadesign.be/2005/05/de-ie-ol-bug/

    Webby,

    thanks for that link. Although I tend to find it a bit of a bulky solution, it's good to know that there actually IS one.

    And about the doctype: does it also work when using a Strict HTML doctype?

  3. 07 September 2006 (12:27 PM) by Will

    Thankyou so much! I have been googling for a fix for this problem for a while, it has been bugging me (hahaha.... sorry) for ages!

    Once again, thankyou!

  4. 29 October 2006 (05:00 AM) by Huw

    Super, thanks for that!

  5. 06 November 2006 (09:37 PM) by Luis Echeverria

    Thanks for the IE/<ol> solution!!! Much appreciated.

  6. 14 August 2007 (08:58 AM) by Anna

    This solution did not work for me as the {display:inline} messed up my positioning.

    So here is my solution: I added a <br /> as the first element of every <ol>.

  7. 13 June 2009 (01:57 AM) by BlueBoden

    There are two working solutions with examples and explanations posted at Brugbart.

    http://brugbart...ts-Bug_188.HTML

    They are both using plain CSS, no messing with the markup required.

Leave a comment

RE: Nested lists bug

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

These settings will be saved for your convenience.