This was a bigger pain in the ass than it should have been.
[spoiler ="a tab set using no images or javascript. May not work in ie."]<html>
<head>
<title>tabset</title>
<style>
.tabset {
background-color:rgb(100,100,100);
height:50px;
width:500px;
display:table-cell;
vertical-align:bottom;
padding:0 0 5 20;
margin-left: -20;
margin-right:-20;
}
.tabset > div {
display:inline-block;
position:relative;
margin-left:-20;
margin-right:-20;
}
.tabset > div > div:first-child {
position:relative;
margin-left: -0;
display:inline-block;
padding:0;
z-index:100;
vertical-align:bottom;
width:20px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.tabset > div > div:last-child > div {
position:relative;
margin-right:-0;
display:inline-block;
padding:0;
z-index:100;
vertical-align:bottom;
width:20px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 0px;
}
.tabset > div > div:first-child > div {
position:relative;
margin-right:-0;
display:inline-block;
padding:0;
z-index:100;
vertical-align:bottom;
width:20px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 18px;
}
.tabset > div > div:last-child {
position:relative;
margin-right:-0;
display:inline-block;
padding:0;
z-index:100;
vertical-align:bottom;
width:20px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.tabset > div > div:nth-child(2) {
position:relative;
display:inline-block;
padding:5 20 5 20;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
z-index:100;
vertical-align:bottom;
}
.tabset > div:hover > div:first-child {
color:red;
z-index:1000;
}
.tabset > div:hover > div:nth-child(2) {
color:red;;
padding:5 20 20 20;
z-index:1000;
}
.tabset > div:hover > div:last-child {
color:red;
z-index:1000;
}
.first > div {
background-color:rgb(200,200,100);
}
.second > div{
background-color:rgb(150,200,100);
}
.third > div{
background-color:rgb(100,200,150);
}
.fourth > div {
background-color:rgb(100,200,200);
}
.first > div:first-child > div {
background-color:rgb(100,100,100);
}
.second > div:first-child > div{
background-color:rgb(200,200,100);
}
.third > div:first-child > div{
background-color:rgb(150,200,100);
}
.fourth > div:first-child > div {
background-color:rgb(100,200,150);
}
.first > div:last-child > div {
background-color:rgb(150,200,100);
}
.second > div:last-child > div {
background-color:rgb(100,200,150);
}
.third > div:last-child > div {
background-color:rgb(100,200,200);
}
.fourth > div:last-child > div {
background-color:rgb(100,100,100);
}
</style>
</head>
<body>
<body>
<div class="tabset">
<div class="first"><div><div> </div></div><div>
first
</div><div><div> </div></div></div><div class="second"><div><div> </div></div><div>
second
</div><div><div> </div></div></div><div class="third"><div><div> </div></div><div>
third
</div><div><div> </div></div></div><div class="fourth"><div><div> </div></div><div>
fourth
</div><div><div> </div></div></div>
</div>
<div class="shit">damn it to hell</div>
</html>
[/spoiler]