Skip to content

Whatstyle.net

By Harmen Janssen

• Home
• About
• Archive
• Résumé
• Portfolio
• Accessibility
• Contact

Nested lists bug

Posted on 26 August 2006 (02:59 PM)

Comments (7)

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

• ← previous article: Styling quotations
• → next article: Displaying search results with PHP

Sorry, due to spam, comments are temporarily out of order.

Back to top

Preferences

• Layout:
  • High contrast
  • Regular
• Language / Taal:
  • English
• Text-size:
  • Increase text-size
  • Decrease text-size
  • Regular text-size

These settings will be saved for your convenience.