CSS Tip:
Styling Lists With CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Lists are great way to emphasize important page content. Visitors use them to quickly scan the page for important information. Basic lists are useful, but you can add even more visual interest and prominence using CSS to style them. Just watch for some potential browser display problems.

Flexibility And Control With CSS

Cascading Style Sheets (CSS) give you a lot of flexibility and control over page layout and formatting. Use CSS to add background color, text color, custom bullets, borders, etc. to your lists. It's a great way to make them more visually prominent without using extra images or tables.

Let's take one of the example lists from our January 2004 Design Tip "Lists Visitors Love To Read" and spruce it up a bit using CSS properties.

Here's the original list:

The style rule below creates a class named "colorList" and adds a 2 pixel, solid, maroon border around a blue background with bold white text:

<style type="text/css">
.colorList
 {
  border-style:solid;
  border-width:2px;
  border-color:maroon;
  background-color:yellow;
  color:navy;
  font-weight:bold;
 }
</style>

Then apply the class to the opening UL tag:

<ul class="colorList">

Avoid Browser Display Problems

That seems pretty straightforward, doesn't it? But there's a problem: the code listed above isn't cross-browser compatible when the class is applied to the list itself.

When the border property is used to add a border around a list, the bullets and numbers display outside the border in Explorer 6 and Opera 6.

For instance, here's how our example code displays in Netscape 6 and 7. It looks just as you would expect.

Here's Explorer 6 with a border but no width property set. The bullets are back but displayed outside the border and the list element extends all the way across the browser.

Correct Display Problems With A DIV

There's an easy fix for this problem: don't style the list itself.

Here's how that technique looks in Explorer 6.0:

Here's the code:

That simple addition of a single DIV tag gives you the display you expect in Explorer, Netscape, and Opera. Note that you may have to adjust the padding and margin around the list because some browsers add a bit of extra spacing when the list is inside a DIV tag.

But of course, first you have to know there's a problem before you can fix it. Finding browser display problems can be particularly tricky because you need access to many different operating systems, browsers, and browser versions to perform a complete test.

Large Internet companies have expensive testing labs and employees paid to make sure everything looks great before launch and after every change. But what about individual webmasters who can't afford that kind of set-up?

NetMechanic's Browser Photo tool gives you the resources of a complete testing lab at a small fraction of the price. You get to view actual screen shots of your Web pages in 16 different browsers, browser version, and operating system combinations.