It's Movember. Movember is a yearly, world-wide fundraiser for research of men's health problems, such as prostate cancer and depression. Your donation will count, even if it's just $1. Click here to donate.
Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

No Bullets on <ul> and <ol> Bug

Affected Versions

This bug affects: IE7, IE6

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 <ul> element or <ol> element, and you set width property on it... what happens? They get "layout" in IE and it happily hides their bullets/numbers.

Demo

Due to the nature of the bug, the demo is located on a separate page

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 <ul> 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 <li>s and they are sticking out of <ol>/<ul>... when the <ol>/<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:

Due to the nature of the bug, the fixed demo is located on a separate page.

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 <ol>/<ul> to the <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 <li> and then use the same value - except negative - for margin-left on the <ol>/<ul>:

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

Comments

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

Alternatively, purchase my books: