Alright, so I've got a couple divs wrapped in a container. The two interior divs overlap each over by 15px; The problem is I'm not able to layer them like I want.
<div class="headerButtons">
<div id="WorkTableButton" class="WorkTableButtonActive">
Work Table
</div>
<div id="additionalCostsButton" class="additionalCostsButtonInactive">
Additional Costs
</div>
</div>
and the CSS looks like so,
.headerButtons{
margin:auto;
text-align:center;
}
.headerButtons div{
text-align:center;
height:27px;
text-indent:-9999%;
display:inline-block;
cursor:pointer;
}
#WorkTableButton{
width: 195px;
}
.WorkTableButtonActive{
background: url(ui_images/WorkTableActiveButton.png) no-repeat;
z-index:99999;
}
#additionalCostsButton{
width: 192px;
position:relative;
left: -15px;
}
.additionalCostsButtonInactive{
background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat;
z-index:0;
}
The problem is, the #WorkTableButton div still shows up behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it which layer the div above the other... Right?
What am I doing wrong?
Thanks,