Loading ...

Aligning List Bullet Images

by Greg Lunn - October 10, 2006

Recently, I fought another browser inconsistency battle over the placement of image bullets to the left of an unordered list. While Firefox places the bullets where I expect, Internet Explorer places them too high, moving them out of alignment with the text. IE also occasionally moves the text too close to the bullet, and refuses to move it no matter what styles I apply. It’s only a minor difference, but in some cases this misalignment can become disorienting to the user.

What’s going on here?

The inconsistency occurs because the browsers disagree over where to position the list-style-image attribute, which is used to create custom bullets within an unordered list. I tried several small solutions, such as adjusting the line-height of the text or adding additional margins and padding, but these either had no effect or created even more inconsistencies.

ul {
    font-weight:bold;
    color:#2a245b;
    line-height:1.4;
    list-style-image:url(star.gif);
}

Firefox (left) displays the list as expected, but Internet Explorer causes the bullet image to shift up and to the right.

Eventually, I decided to find another way to create the same effect without using list-style-image, and I found a solution that worked.

Let’s try something else

Since the browsers don’t agree on the position of the bullets, either in their default form or as an image, I did away with them entirely by using list-style-type:none;. This leaves me with a bare list, so it’s time to replace the bullet some other way.

I decided to place a background image in each of the list items and add just enough padding on the left side to make room for the image. This way, I can precisely control the display of the bullet using background-position if necessary, and place the text consistently where I want by using just the right amount of padding-left. This method still produces a standards-based accessible list, while creating a consistent web page across all modern browsers.

ul {
    font-weight:bold;
    color:#2a245b;
    line-height:1.4;
    list-style-type:none;
}
li {
    padding-left:25px;
    background:transparent url(star.gif) no-repeat;
    background-position:0 5px;
}

Both browsers display this version almost identically.

A different approach

You will frequently run into similar scenarios when developing CSS-based layouts, and often the answer isn’t the addition of more elements and styles. You can usually solve little inconsistencies by finding a different method to create the same effect - one that all browsers will render correctly.