I'm trying to make navigation tabs using a table - HTML and CSS only (I know this is not the best or best-practices way to do it). The selected tab should have a different background than the unselected one. I'm trying to do this using a non displayed radio button, and the "checked" attribute, but for some reason, I can't use a complex compound selector.
Here is my HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="tab2.css" />
</head>
<body>
<table class="tabs">
<tr>
<td><input type="radio" name="choices" id="inventory" checked="checked" /><span class="before"><span class="after"><span class="middle"><a href="inventory.html" class="linked">Inventory</a></span></span></span></label></td>
<td><span class="before"><span class="after"><span class="middle"><input type="radio" name="choices" /><a href="orderInfo.html">Order Information</a></span></span></span></td>
<td><span class="before"><span class="after"><span class="middle"><a href="accounts.html">Accounts</a></span></span></span></td>
<td><span class="before"><span class="after"><span class="middle"><a href="shippers.html">Shippers</a></span></span></span></td>
<td><span class="before"><span class="after"><span class="middle"><a href="suppliers.html">Suppliers</a></span></span></span></td>
</tr>
</table>
<hr />
</body>
</html>
and here is my CSS
Code:
.tabs{
font-family: Tahoma;
font-size: 13px;
border-spacing:5px;
}
a:link{
text-decoration:none;
color:black;
}
a:hover{
color:#cc6600;
cursor:pointer;
}
hr{
border:none;
background-color:#cccccc;
margin-top:-5px;
height:1px;
}
.middle {
background-image:url('mid.gif');
background-repeat: repeat;
background-position: left top;
padding-left:4px;
padding-right:2px;
padding-top:3px;
margin-left:-3px;
padding-bottom: 3px;
}
.after {
background-image:url('right.gif');
background-repeat: no-repeat;
background-position: right top;
padding:3px;
}
.before{
background-image:url('left.gif');
background-repeat: no-repeat;
background-position: left top;
padding:3px;
}
input[checked="checked"] + .before{
background-image:url('left-selected.gif');
background-repeat: no-repeat;
background-position: left top;
padding:3px;
}
input[checked="checked"] + .before + .after{
background-image:url('right-selected.gif');
background-repeat: no-repeat;
background-position: right top;*/
padding:3px;
}
input[checked="checked"] + .before + .after + .middle{
background-image:url('mid.gif');
background-repeat: repeat;
background-position: left top;
padding-left:4px;
padding-right:2px;
padding-top:3px;
margin-left:-3px;
padding-bottom: 3px;
}
Before you post, read our: 
