Currently, I am utilizing jQuery tabs and decided to enhance the tab headers with some spans to incorporate a background image. Below is the markup:
<ul>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#orderInfo">
Order Info</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#notes">
Notes</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#eventLog">
Event Log</a></span></span></span></li>
</ul>
The issue at hand is that the text inside the anchors appears at the very bottom of the anchor's block. If only I could shift it up by about three pixels, everything would be perfect. Here is all the CSS that I believe to be pertinent:
.tab_outer, .tab_inner, .tab
{
display: inline-block;
font-size: 11px;
list-style: none;
}
.tab_outer
{
margin-bottom: -3px;
padding-right: 3px;
margin-top: 4px;
}
.tab_inner
{
margin-bottom: -1px;
padding-left: 3px;
}
.tab
{
margin-top: 0px;
padding: 0px 4px 0px 4px;
margin-bottom: -1px;
}