From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Unordered lists are all over the Web. They can be used for almost anything you can think of and they make it easier for people to read your Web pages. But styling them can be challenging, especially if you need them to be in a specific position inside a box.

A Standard Unordered List

For the purposes of this article, we'll be working with a standard unordered list of links. Except for the last example, the list elements don't have to be links, but that is really common. The HTML looks like this:

<ul>
<li><a href="">List item 1</a></li>
<li><a href="">Item in the list #2</a></li>
<li><a href="">And the final list element</a></li>
</ul>

See how it displays

Unordered lists are fairly boring. The list items are displayed one after the other, each following a bullet icon. And the first thing you may notice if you're trying to get your Web page to look identical in IE and Firefox is that the bullets don't look the same.

The IE bullet has some anti-aliasing on it to make it look rounder, whieh the Firefox bullet is only two colors (black and white) so it looks more like a small diamond if you look at it closely.

Change the Bullet By Using an Image Instead

The simplest way to make the bullets identical is to tell the browsers to use an image instead of their default bullets. To do this, you use the list-style-image CSS property.

I took screenshots of the bullets in Firefox and IE and created image files from them. You may download them if you'd like:

• Internet Explorer Bullet
• Firefox Bullet

Use this CSS to set up your unordered list with these images for bullets:

#ie li {
  list-style-image: url(bullet_ie.gif);
}
#ff li {
  list-style-image: url(bullet_ff.gif);
}

See how this list displays

But changing the bullet can be tricky too. The icons may be displayed too far above or below the line and you can end up with strange layouts in different browsers.

Use a Background Image

A more advanced way of creating a bulleted list with icons for bullets is to use a background-image and set the list-style to none.

This is a bit trickier because you have to set styling on both the UL element and the LI. Otherwise, your bullet will end up being behind the text rather than beside it.

First, turn off the bullets and set up the image as your background. Make sure to align it to the center and left and set it to no-repeat:

li {
  list-style: none;
  background: url(16-heart-red-xxs.png) no-repeat left center;
...

Then, set the left padding so that your text doesn't sit on top of your bullet:

...
  padding-left: 1.2em;
}

Finally, adjust the margin and padding on the ul itself so that the list displays where you want it to:

ul {
  margin: 1.3em;
  padding: 0;
}

See how this list displays

But There's Lots More You Can Do with Lists and CSS

• Make them look like buttons
• Create a vertical menu
• Create a horizontal menu