hasLayout.net

Bookmark and Share

Disappearing List Background Bug

Table of Contents

Affected Versions

This bug affects: IE6

Symptoms

Background on <li>, <dt>, <dd> disappears

Date of the Tutorial

Sun Jul 19 17:05:40 2009

Description

Here's a story, you got a <div>... you set position: relative on it and you it. Inside that <div> you have a <ul>, <ol>, or a <dl> with background set on list items. What happens in IE? Background isn't shown:

Demo

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

HTML Code:
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

<div>
    <dl>
        <dt>Foo:</dt>
            <dd>Bar</dd>
        <dt>Baz:</dt>
            <dd>Ber</dd>
    </dl>
</div>
CSS Code:
div {
    float: left;
    position: relative;
    clear: left; /* not related to the bug */
}

dt, dd, li {
    background: #f00;
}

This is really a "layout" bug, but we can't set "layout" on our list items because then IE would not "shrink-wrap" them... what to do?

Solutions

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

Solution (Clean Solution)

Date of the Solution

Sun Jul 19 17:20:24 2009

Fixed Versions

all of the affected

Description

As I've mentioned earlier, the bug can be fixed by giving your list items "layout", but that would cause them to fail to shrink-wrap, which may be the reason for why you are floating that <div> in the first place. Let's take a look at the fixed demo:

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

HTML Code:
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

<div>
    <dl>
        <dt>Foo:</dt>
            <dd>Bar</dd>
        <dt>Baz:</dt>
            <dd>Ber</dd>
    </dl>
</div>
CSS Code:
div {
    float: left;
    position: relative;
    clear: left; /* not related to the bug */
}

dt, dd, li {
    background: #f00;
    position: relative;
}

The bug is fixed by setting position property to value relative on our list items. Simple and clean.

Comments

Create new comment

Currently there are no posted comments.

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

Alternatively, purchase my book: