What’s going on here?

The inconsistency occurs because the browsers disagree over where to position the list-style-image attribute, which is used to create custom bullets within an unordered list. I tried several small solutions, such as adjusting the line-height of the text or adding additional margins and padding, but these either had no effect or created even more inconsistencies.

ul {
    font-weight:bold;
    color:#2a245b;
    line-height:1.4;
    list-style-image:url(star.gif);
}

Firefox (left) displays the list as expected, but Internet Explorer causes the bullet image to shift up and to the right.

Eventually, I decided to find another way to create the same effect without using list-style-image, and I found a solution that worked.

Let’s try something else

Since the browsers don’t agree on the position of the bullets, either in their default form or as an image, I did away with them entirely by using list-style-type:none;. This leaves me with a bare list, so it’s time to replace the bullet some other way.

I decided to place a background image in each of the list items and add just enough padding on the left side to make room for the image. This way, I can precisely control the display of the bullet using background-position if necessary, and place the text consistently where I want by using just the right amount of padding-left. This method still produces a standards-based accessible list, while creating a consistent web page across all modern browsers.

ul {
    font-weight:bold;
    color:#2a245b;
    line-height:1.4;
    list-style-type:none;
}
li {
    padding-left:25px;
    background:transparent url(star.gif) no-repeat;
    background-position:0 5px;
}

Both browsers display this version almost identically.

A different approach

You will frequently run into similar scenarios when developing CSS-based layouts, and often the answer isn’t the addition of more elements and styles. You can usually solve little inconsistencies by finding a different method to create the same effect – one that all browsers will render correctly.

Let’s take a look at the HTML code we will use for this example. I wanted to keep the code as clean as possible, while making it possible to arrange the display of the items in a variety of ways. Both the vertical and horizontal navigation will be based in this simple list.

<ul id="navlist">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
</ul>

Creating Pure CSS Rollovers

Using CSS, image rollovers can be created using only a single image that is loaded when the page is called, eliminating the need to preload images using JavaScript. To create this effect, you’ll need to create images that contain the two or three states of your rollover within the same file.

Once the images are ready, they are loaded into a container element, in this case the <a> tag, as a background image and cropped using the <a> tag’s width and height. Then it’s simply a matter of using the background-position property to move the image within the container to simulate the image swap effect.

Vertical Navigation

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4

First, let’s take a look at the CSS used to create a vertical navigation menu from the list. It’s really a simple matter of converting the display of the <a> tags to display:block;, and providing them with the proper width and height to display a single “state” from our image. The hover and active pseudo-classes are then used to move the background-position to simulate the rollover effect, as seen to the right. Remember to also remove the bullets by using list-style:none;.

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:135px;
    color:#fff;
    text-decoration:none;
    background:url("images/tab.gif") no-repeat;
    padding:7px 10px 6px 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

How About Horizontal Tabs?

Using the same HTML, we can create a horizontal list with the appearance of tabs by using a different image, and adjusting the CSS. Note that the only real differences in this from the vertical example are that instead of setting the <a> tags to block, we use float:left; to place them to the right of one another. Also, we use display:inline; on the <li> tags to get them to display horizontally, which has the added benefit of automatically removing the bullets. (See the earlier article, Simple Horizontal Navbar List, for another example.)

Here is the CSS, adjusted for a horizontal display.

#navbar {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    height:45px;
}
#navbar li {
    list-style:none;
    display:inline;
}
#navbar a {
    width:110px;
    color:#fff;
    text-decoration:none;
    background:url("images/tab2.gif") no-repeat;
    float:left;
    padding:12px 10px 13px;
    margin:0 -10px;
}
#navbar a:hover { 
    background-position:0 -45px;
    color:#1e5ebd;
}
#navbar a:active {
    background-position:0 -90px;
    color:#1e5ebd;
}

The result is the horizontal tabbed menu below:

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4

Note: In the examples displayed on this page, I’ve also included background images in the parent <ul> lists and additional padding, solely for appearance and easier recognition of the edges of the rollovers. Depending on the appearance of your buttons, this method may or may not be desirable, but will not affect the technique described here. You can see the examples on their own by downloading the example files.

Start with an HTML list

There are many ways to accomplish the effect we’re going for here, and some result in even cleaner HTML than this example. There are many impressive list conversions at Listamatic for a variety of needs. This example will create a centered, horizontal set of HTML links separated by a vertical bar.

Our HTML markup looks like this:

<ul id="navlist">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Store</a></li>
	<li><a href="#">About</a></li>
	<li class="last"><a href="#">Contact Us</a></li>
</ul>

Overall, a very clean markup that’s easy to update and maintain. Notice that this markup does not contain the pipe symbol – we’ll add the separator using CSS. Although there are differences of opinion about whether or not the pipe character should be part of the content, my main reason for leaving it out of the HTML is to prevent screen readers like JAWS from awkwardly announcing a “vertical bar” after each list item.

The HTML contains only one id="navlist", so that we can apply styles to this list in particular. It also contains one class="last" that we will use later to eliminate the extra separator.

Blend in some nice CSS

To convert an unordered list to a horizontal menu requires only a few CSS rules. Let’s take a look:

#navlist li {
	display:inline;
	padding:0 .9em;
	border-right:1px solid #009;
}

We begin by adjusting each <li> to display:inline, which forces the list items to display horizontally and removes the bullet point from the front of each. After adding a little left and right side padding, we replicate the effect of a vertical bar by adding a 1px border to the right side of each list item.

The navbar is horizontal, but it still has an extra right border.

At this point, we have a functional horizontal navbar, but it has an extra right border hanging off of the end. To remove this extra border, I simply created the .last class and assigned it a value of border:none. It’s my least favorite part of the technique because of the extra class markup in the HTML, but I think it’s the best option to ensure that the entire list can be centered.

#navlist li.last {
	border:none;
}
#navlist {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-align:center;
}
#navlist a {
	color:#009;
	text-decoration:none;
}
#navlist a:hover {
	color:#39F;
	text-decoration:underline;
}

The final CSS rules apply text formatting to the list, center the entire list, and ensure link and hover states behave in a suitable manner. These are completely adjustable for your particular needs. For instance, I would most likely choose a smaller font size if I were using this technique for a footer.

The finished horizontal navbar.

Our finished navbar behaves consistently across browsers and maintains a very high degree of accessibility, while providing an easy-to-use and visually pleasing navigation scheme.