hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

Bullets/numbers disappear from <ul> and <ol> elements

Date of the Tutorial

Sat Jul 18 12:44:17 2009

Description

Here's a splendid bug. Say, you got a ' element"><ul> element or ' element"><ol> element, and you set width property on it... what happens? They get "layout" in IE and it happily hides their bullets/numbers.

Demo

HTML Code:

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

CSS Code:

ul, ol { 
    width: 500px;
    margin-left: 2em;
}

I've added a margin-left on the lists to offset the bullets from the edge. Bug's trigger is "layout" on ' element"><ul> element/' element"><ol> element. In my example it's given by width property, but in your case it can be anything else, including fixes for layout-related bugs.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Sat Jul 18 13:01:23 2009

Fixed Versions

all of the affected

Description

What IE is doing, the way I see it, is the bullets are on ' element"><li>s and they are sticking out of ' element"><ol>/' element"><ul>... when the ' element"><ol>/' element"><ul> get "layout" the bullets are no longer drawn. Let's take a look at the fixed demo and I'll explain what I did:

HTML Code:

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

CSS Code:

ul, ol { 
    width: 500px;
}
li {
    margin-left: 2em;
}

Now, all I did is move the margin-left from ' element"><ol>/' element"><ul> to the ' element"><li> element and now bullets/numbers show up just fine.

The 2em value is not a magic number, but something I just made up on the spot; if it looks off to you, play around with it.

Note: if your margins are all zeroed out, all you need to do is set margin-left on the ' element"><li> and then use the same value - except negative - for margin-left on the ' element"><ol>/' element"><ul>:

ul, ol { 
    width: 500px;
    margin-left: -2em;
}
li {
    margin-left: 2em;
}