hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

Incorrect position or no rendering at all of list markers (bullets) when list items have floated images

Date of the Tutorial

Thu Aug 13 08:25:03 2009

Description

In this bug floated images either go outside of the principal box or cause the list marker (bullet) to be completely removed from the list item. Demo:

Demo

HTML Code:

<ul>
    <li class="one">
        <img src="hl_logo.png" width="95" height="115" alt=""> Lorem Ipsum
    </li>
</ul>
<ul>
    <li class="two">
        <img src="hl_logo.png" width="95" height="115" alt="">
        <p>Lorem Ipsum</p>
    </li>
</ul>
<ul>
    <li class="three">
        <img src="hl_logo.png" width="95" height="115" alt="">
        <p>Lorem Ipsum</p>
    </li>
</ul>

CSS Code:

li {
    list-style: disc;
    overflow: hidden;
    width: 500px;
}
.one img, .two img{
    float: left;
}
.three img {
    float: right;
}

In IE8 the first two lists will have the images outside the principal box (or the bullets to be shifted by a lot into the principal box, if you want to think of it that way). The last list, where the image is floated right, the bullet will be completely absent.

What is sad about this bug is that Opera 9.64, Safari 4 and Konqueror 4.2.4 have [parts of] this bug present in the as well.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Thu Aug 13 08:33:38 2009

Fixed Versions

All of the affected

Description

Since this bug affects other browsers and even the "bugless" version of rendering is a bit unpleasant to the eye (i.e. the bullet is below the image instead of being at the top) I think the solution I am about to propose, despite requiring an extra HTTP request, is quite reasonable and provides consistent rendering across browsers:

HTML Code:

<ul>
    <li class="one">
        <img src="hl_logo.png" width="95" height="115" alt=""> Lorem Ipsum
    </li>
</ul>
<ul>
    <li class="two">
        <img src="hl_logo.png" width="95" height="115" alt="">
        <p>Lorem Ipsum</p>
    </li>
</ul>
<ul>
    <li class="three">
        <img src="hl_logo.png" width="95" height="115" alt="">
        <p>Lorem Ipsum</p>
    </li>
</ul>

CSS Code:

li {
    list-style: none;
    overflow: hidden;
    width: 500px;
    background: url(disc.gif) no-repeat left .5em;
    padding-left: 1em;
}
.one img, .two img{
    float: left;
}
.three img {
    float: right;
}

The idea of the fix is to remove the "native" bullet and use an image instead. Since the positioning of list-style-image is quite inconsistent across browsers, I've used the image as background on the ' element"><li> elements. The top position of the background "bullet" is set in em units and I also added padding-left (and set em value) to offset our content away from the "bullet". Works for me!