Throughout my search for the best CSS tab strip, I have finally developed what I consider to be the smallest HTML/CSS footprint to achieve the desired results. Check out the code below. If you decide to use this code, please include a link back here from your site to help others find the same solution you found helpful.

Here’s the CSS

ul.tabstrip {
margin: 0px;
padding: 0px;
font-size: 80%;
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
}
ul.tabstrip li {
float: left;
}
ul.tabstrip li a {
display: block;
color: #fff;
text-decoration: none;
background-color: transparent;
background-image: url('images/tabstrip-off.gif');
background-position: left top;
background-repeat: no-repeat;
margin-left: 2px;
padding-left: 16px;
white-space: nowrap;
}
ul.tabstrip li a span {
display: block;
background-image: url('images/tabstrip-off.gif');
background-position: right top;
background-repeat: no-repeat;
padding: 4px 16px 4px 0px;
}
ul.tabstrip li a:hover, ul.tabstrip li a:active {
background-image: url('images/tabstrip-on.gif');
background-position: left top;
}
ul.tabstrip li a:hover span, ul.tabstrip li a:active span {
background-image: url('images/tabstrip-on.gif');
background-position: right top;
}

Here’s the HTML

Note: I neglected to include the span tags in the original post. They have since been added to make the HTML work as intended.

<div id="mainnavigation">
<ul class="tabstrip">
<li><a href="/index"><span>Home</span></a></li>
<li><a href="/new"><span>New Products</span></a></li>
<li><a href="/all"><span>All Products</span></a></li>
<li><a href="/reviews"><span>Reviews</span></a></li>
<li><a href="/contact"><span>Contact Us</span></a></li>
<li><a href="/faqs"><span>FAQ</span></a></li>
</ul>
</div>

Requirements

Only 2 images are required for the effect achieved with the CSS & HTML code provided above. You will need one image for the “normal” tab, and one for the “hover” tab. I have included the images we used to help get you started below.

(normal)

(hover)