This tutorial are tested with Internet Explorer 7 and Firefox 2 on the PC.

It will be nice to use image background instead of a solid color. This can be accomplished by setting the background-image property. We also want to swap the image (to show highlight) when the mouse is over the link. To do this, assign the background image to the <a> tag. (Iif we assign it to the <li> tag, then will need to use JavaScript to swap the image.)

Here are the two images, one for normal stage, the other for highlight state:

The problem is the dimensions, we need to make them the same dimensions as the image, which so happen to be 139px x 23p. In the following, we make modifications by setting the width and height property of the <a> tag, removing the padding (padding: 0px), and alighning the text to the center (text-align:center). We also assigned the font (font-size:10px and font-family:Arial, Helvetica, sans-serif, so that we won't be using a font that won't fit into the image) and removed the text underline (text-decoration:none).

The result like shown on the left. One more thing to note here is the line line-height:23px. This is used to align the text vertically and the value is set to match the height of the image (the expected way of using vertical-align: middle does not work in this case).

The line display: block is important because this forces the a<> which is an inline element to use the width and height attribute. Without it, the result is like this: