I think we can all admit that the few choices CSS gives you for bullet shapes in unordered lists are pretty pedestrian. I’ve done designs where neither disc, circle, nor square was appropriate for the look-and-feel of the site. I know I’m supposed to be able to substitute an image with the list-style-image property. To be honest, I’ve never had much luck getting that particular property to work correctly. Maybe I just never spent much time on it because it’s so easy to just manipulate the background of my list items and get exactly what I’m seeking.

I’ll assume that you already have created the image you want to use as your bullet. Here’s mine:

Using this code in your CSS file will give you a new bullet:

ul {
list-style: none;
}

li {
padding-left: 12px;
background: url(“images/bullet.gif”) no-repeat;
}

Here’s what it looks like:

I consider this an improvement over the generic circles and squares, but notice that the bullet doesn’t line up with the text for each list item. The first time I encountered this I probably spent at least an hour manipulating my bullet image in Photoshop. By trial and error I was attempting to come up with an image of the exact dimensions that would be perfectly centered with my text across all browsers. I don’t remember how the realization finally came to me that there was a far, far easier way to accomplish what I wanted with CSS.

li {
padding-left: 12px;
background: url(“images/bullet.gif”) no-repeat;
background-position: 0 4px;
}

The background-position tag moves my background image to the right 0 pixels and down 4 pixels from the top left corner of the li block element. The result looks like:

filed under: Web Development