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)