1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Disappearing List Background Bug

Problem

When list items have background colors or images, and the list is placed within a floated, relatively-positioned container, the backgrounds may not render as specified.

Solution

As recommended by Matt Smith, specify position: relative for the affected lists.

Detailed description

If any <ol>, <ul> or <dl> lists in your page are not rendering their backgrounds in IE/Windows, then you're very likely seeing this bug. It occurs when list items with backgrounds appear inside a floated, relatively-positioned <div>. Luckily, it's not usually necessary to relatively position a floated <div> unless you're working with absolutely-positioned elements...or you're trying to work around other Internet Explorer bugs.

The order in which the lists are placed and their list types can affect the way the backgrounds display. For example, if you place a <dl> after a <ul> its backgrounds will display, but when placed before, only the background on the first <dt> will display. If a background is set on a <dd> then it will always be displayed. Other strange effects this bug produces are scroll and window painting. This is where the act of scrolling or moving a window over a color background will "paint" it. Note that either a background image or a background color can be "painted" by window dragging, so this is consistent with the list background problem.

Example CSS:

div#wrapper {
    position: relative;  /* triggers bug */
    float: left;
    width: 250px;  
}    
div#wrapper dt {
    background:#CCCCEE; ;  /* triggers bug */ 
}

Example HTML:

<div id="wrapper">
<dl>
<dt>List One</dt>  <!-- this background won't render -->
    <dd>Subitem 1 </dd>
    <dd>Subitem 2 </dd>
    <dd>Subitem 3 </dd>
    <dd>Subitem 4 </dd>
    <dd>Subitem 5 </dd>
<dt>List Two</dt>  <!-- this background will render -->
    <dd>Subitem 1 </dd>
    <dd>Subitem 2 </dd>
    <dd>Subitem 3 </dd>
    <dd>Subitem 4 </dd>
    <dd>Subitem 5 </dd>
</dl> 
</div>

This code should produce the following display in Internet Explorer (versions 6 and earlier), with the first <dt> tag's background not rendering.  To test this bug locally, please download "bug_481.zip" below, which contains a self-contained HTML/CSS file that will reproduce this issue in IE.

(example of list background not rendering)

Solution

The fix for this bug is simple: just relatively position the affected lists. You can relatively position all lists with the following CSS declaration:

ul, ol, dl { position: relative; }

Original Reporter/Article:

• Matt Smith on positioniseverything.net
  

bg_drop_example.jpg
bug_481.zip

Text ID: DISAPPEARING_LIST_BACKGROUND

---