List Drop Shift Bug

Affected Versions

This bug affects: IE8

Symptoms

Stuff in <li>s drops down below the bullet

Date of the Tutorial

Sun Jul 19 13:25:16 2009

Description

Spledind bug in IE8, seems like they tried to fix bullets in IE and now we have this: stuff drops below the bullets. To the demo!

Demo

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

HTML Code:

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
</ul>

CSS Code:

li {
    border: 1px solid #fff;
}

a {
    background: #f00;
    display: block;
    overflow: hidden;
}

The trigger for the bug is both, overflow set to anything but visible and display set to block (as well as several other values for display property).

Solutions

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

Solution (Conditional Comments Solutions)

Date of the Solution

Sun Jul 19 13:38:22 2009

Fixed Versions

all of the affected

Description

Floats to the rescue! Let's look at the fixed demo:

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

HTML Code:

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
</ul>

CSS Code:

li {
    border: 1px solid #fff;
}

a {
    background: #f00;
    display: block;
    overflow: hidden;
}

Conditional Comments:

<!--[if IE 8]>
    <style type="text/css">
        a {
            float: right;
            width: 100%;
        }
    </style>
<![endif]-->

Floating the <a> elements fixes the bug. Note that float is set to right, not left; if we use left, the bullets of the list end up on the wrong side... fun huh? We also use width property to make our <a> elements remain their width; 100% is not exactly the same as auto, but try to improvise if you have padding/borders set. The reason for conditional comments is that IE8 seems to contain floated <a> elements just fine without extra code, as opposed to other browsers; you may want to play around with this.