Styling unordered lists

Tired of the old round, black bullets for your unordered lists? There are some preset list styles in CSS, but some of them don’t look uniform across all browsers.

The solution:

Use an image as your bullet!

The simplest way to implement this is to use the image as a background image of the li.

This is the image that I will be using:

CSS:

<style type="text/css">
.list ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.list li
{
    background-image: url(images/li.jpg);
    background-repeat: no-repeat;
    background-position:0px 7px;
    padding-left: 14px;
    margin-left:20px;
}
*html .list li
{
    background-position:0px 5px;
}
</style>

Explanation:

I included the “*html” hack because IE6 sometimes displays the li images a little higher or lower than the rest of the browsers.

You could fiddle with the numbers a little to get the spacing that you find fits your site. When using background-position, remember that the first number is for “left” and the second number is for “top”.

This is what it should look like:

Short and sweet.