IE Style Tabs in Html
February 13, 2008Lot 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.
