I am attempting to build a "Tabbed" side navigation menu using html/css.
I am going with the most convenient approach of using a table that has a single row and two cells (columns). The left cell is for the "tabs" and the right cell is for the content to be displayed. The left cell containing the tabs has a right border set to be the divider between the tabs and the content.
Each "Tab" is a div tag within this cell. I then want to eliminate this right border for the selected "Tab". To achieve this I am setting the selected "Tab" div with a margin-right of -1px. The idea is this will essentially offset that div to cover the right border that is set in the underlying table cell. This mechanism works fine in Firefox and Safari, but does not work in IE7. Anyone have an idea on how to get this tor work in IE7?
Note... I have not checked this in IE8 as of yet.
Here is the html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Side Tabs</title>
<style type="text/css">
#sidemenu
{
background-color: #DDFFCC;
border-right: 1px solid #BDDCAD;
width: 199px;
vertical-align: top;
text-align: center;
}
#sidemenu div
{
padding: 8px 0px 8px 8px;
border-bottom: 1px solid #BDDCAD;
font-weight: bold;
font-size: 12pt;
}
#sidemenuselected
{
padding: 8px 0px 8px 8px;
border-bottom: 1px solid #BDDCAD;
font-weight: bold;
font-size: 12pt;
background-color: #ffffff;
margin-right: -1px;
}
</style>
</head>
<body>
<center>
<div style="background-color: #ECF1ED; padding: 16px; width: 600px;">
<table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed;">
<tr>
<td id="sidemenu">
<div style="height: 40px">
</div>
<div>
Product Specifications</div>
<div id="sidemenuselected">
How It Works</div>
<div>
Maintenance</div>
</td>
<td>
<div style="padding: 16px; background-color: #FFFFFF; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>