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

  • Zoffix Znet

    Wed Aug 31 11:34:39 2011

    Matt, my guess is that your .show() function sets the display to `block` instead of `list-item`.

    If that's not the case, try hiding the div using absolute positioning maybe?

  • Matt

    Wed Aug 31 11:02:25 2011

    Does not work when parent div is hidden: #div.hide(); and then shown again: #div.show(); I really hate IE.

  • dubrox

    Sat Apr 2 20:01:49 2011

    I've been looking for this answer so much! Thank you for sharing!

  • Zoffix Znet

    Thu Nov 4 16:26:44 2010

    Hampy, I don't really have any other ideas, as this bug is not meant to affect IE8 (hint to check doctype and support modes).

    Maybe, start dismounting your code inside the <li>s to see what exactly starts to cause the problem.

    Cheers!

  • Hampy

    Thu Nov 4 16:06:01 2010

    I'm having this issue in IE8, and the above fix hasn't solved it (I've verified that offending LI styles include "display:list-item" via the Developer Toolbar).

    My list has far more HTML within the LI tags, and also between them, but everything's nested properly, overall.

    Any other ideas?

  • 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:

Support Wikipedia