hasLayout.net

Share |

No Increase on <ol> Numbers Bug

Affected Versions

This bug affects: IE7, IE6

Symptoms

The numbers on <ol> elements do not increase on subsequent <li>s

Date of the Tutorial

Sat Jul 18 13:16:01 2009

Description

I'm sure some of you ran into this bug at least a few times: you create a <ol>, put some <li>s in it, style your stuff up and BOOM! IE doesn't want to increase the numbers on the <ol>... it's all in 1. 1. 1. 1. (or other repeating number).

Demo

  1. One
  2. Two
  3. Thre
HTML Code:
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Thre</li>
</ol>
CSS Code:
li {
    width: 50%;
}

Notice that I've set width on the <li>s: this is the bug's trigger, not the width itself but the fact that it gives the <li>s "layout", and that can be given with many other properties.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Sat Jul 18 13:30:30 2009

Fixed Versions

all of the affected

Description

The solution is so simple, yet not obvious, that it makes me laugh. Let's take a look at the fixed demo:

  1. One
  2. Two
  3. Thre
HTML Code:
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Thre</li>
</ol>
CSS Code:
li {
    width: 50%;
    display: list-item;
}

Apparently when the <li>s get layout they get so happy that they forget their display value. We remind them by setting display property to list-item on the <li>s; it's the way it's supposed to be, thus we won't be needing any conditional comments for this fix.

Comments

Create new comment

  • Fabienne Rowe

    Wed Jul 28 11:13:43 2010

    OMG - spent hours re-checking CSS for errors.
    Thanks to you, my sanity is back intact!!

  • Jagtesh Chadha

    Mon Mar 15 09:17:06 2010

    Thanks bro, you saved my life!! :)

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: