IE Style Tabs in Html

Lot of web applications I’ve worked with have some kind of navigation that is implemented as Tabs. When I first started using tabs in Web Apps, I implemented them in tables, with the left hand side image of the tab in one cell, the middle part in another cell and the right hand side of the tab image in another cell.

That was before I discovered the beauty of CSS. The last few years I have been evangelising table-less design to every project/client that I go to and pretty much wherever I go, I take my “Tab” design with me. I cannot claim any originality to it, though. I first read about the Sliding door technique at “A LIST apart” a few years ago and I’ve been using it ever since.

Here is my implementation of it that resembles the IE 7.0 style tabs.

To do this, I created 6 images -

Image	Description
	tab-background.png: The background on which the tabs are present
	tab-left.png: The left side of an unselected tab
	tab-right.png: The right side of an unselected tab
	current-tab-left.png: The left side of the selected tab
	current-tab-right.png: The right side of the selected tab
	hover-tab.png: The image when you hover the mouse over the tab

The html markup used to define the tabs is a very simple unordered list -

<div id="primaryNavigation">
    <li><a href="#">Tab One</a></li>
    <li id="current"><a href="#">Tab Two</a></li>
    <li><a href="#">Tab Three</a></li>

    <li><a href="#">Tab Four</a></li>

</div>

The markup is simple, because all the presentation information is present in the css file:

body
{
    background:#fff;
    margin:0;
    padding:0;
    color:#000;
    font:10pt Tahoma, Helvetica, sans-serif;
}
#primaryNavigation {
  float:left;
  width:100%;
  background: url( 'Images/tab-background.png' )
		repeat-x 100% bottom;

}
#primaryNavigation ul {
    margin: 0;
    padding: 2px 10px 0px 3px;
    list-style: none;
    height: 36px;
}
#primaryNavigation li {
    float: left;
    background: url('Images/tab-left.png' )
		no-repeat left top;
    padding: 0px 0px 0px 3px;
    height: 36px;
}
#primaryNavigation a {
    float: left;
    background: url('Images/tab-right.png' )
                no-repeat right top;
    padding: 6px 15px 0px 6px;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    height: 36px;
}
#primaryNavigation a:hover {
    color: black;
    background: url('Images/hover-tab.png' )
                no-repeat right top;
  }
#primaryNavigation #current {
    background:url('Images/current-tab-left.png' )
		no-repeat left top;
    float: left;
    margin: 0;
    padding: 0px 0px 0px 2px;
    height: 36px;
  }
#primaryNavigation #current a {
    background-image: url('Images/current-tab-right.png' );
    color: black;
    white-space: nowrap;
    height: 36px;
    padding: 6px 15px 0px 6px;
}

Pretty simple, huh? This should work in most browsers, although I’ve tested in only on ID 7.0.