hasLayout.net

Affected Versions

This bug affects: IE7

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 ' element"><ol>, put some ' element"><li>s in it, style your stuff up and BOOM! IE doesn't want to increase the numbers on the ' element"><ol>... it's all in 1. 1. 1. 1. (or other repeating number).

Demo

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 ' element"><li>s: this is the bug's trigger, not the width itself but the fact that it gives the ' element"><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:

HTML Code:

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Thre</li>
</ol>

CSS Code:

li {
    width: 50%;
    display: list-item;
}

Apparently when the ' element"><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 ' element"><li>s; it's the way it's supposed to be, thus we won't be needing any conditional comments for this fix.