CSS Tip: Custom Bullets for Lists

Let's face it, standard bullet styles are boring. And not only that – the way they display can vary noticeably on different browsers, which is disappointing for a default value. A custom bullet is a quick and easy way to add visual interest to your site's design. But what's the best way to implement it?

A lot of front-end developers immediately latch onto the list-style-image CSS property. And why not? That's what it was created for! It's as simple as pointing to your image:

ul li {list-style-image: url("bullet.gif");

However, as with the default bullet, this method is still noticeably vulnerable to cross-browser inconsistencies, especially with regard to positioning.

Here is an example:

In Firefox 3 the custom bullet is more or less in the right place, though to be properly aligned it could drop down one pixel or so. However, in IE7 it is placed too high by a noticeable margin. Here is a close-up of the screenshot to fully illustrate the difference between the two.

Unfortunately with CSS there is little way to rectify this short of playing with the line-height property of the list items themselves, which is not the right approach.  But have no fear, there's a better way!  Instead of applying the custom bullet as a list-style-image, apply it as a background image instead.

So your CSS would look something like:

ul li {
 list-style-type: none;
 background: url("bullet.gif") 0px 3px no-repeat;
 padding-left: 15px;
} 

Depending on the dimensions of your image file, you will need to adjust the background-position to get it placed correctly, in addition to using left padding as your indentation offset.

Now compare:

There, doesn't that look better?