Hi,
I've all but figured out how to do fancy tabs for my primary links except for one thing. I am using 2 tab images, left.gif and right.gif, which combined form the whole tab. This is working ok, but I'm trying to use two different images for the active tab and I've only been able to get the right_on.gif to show and have yet to figure out to get the left_on.gif portion of the tab to show.
Here is the CSS code which works, can anyone give me any idea of what to try to get the left side of my "active" tab to show up along with the right_on.gif portion of the tab?
#top-nav {
padding: 0;
margin: 0 0 1.5em 0;
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
#top-nav ul {
margin: 0;
padding: 2px 0 10px 0;
}
#primary {
border-top: solid 1px #999;
border-bottom: solid 1px #999;
padding-bottom: 15px;
vertical-align: top;
text-align: right;
font-size: 1.2em;
}
#primary li {
float: right;
background: transparent url("images/left.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
list-style-type: none;
}
#primary li a {
background: transparent url("images/right.gif") no-repeat right top;
display: block;
padding: 5px 15px 4px 6px;
text-decoration: none;
font-weight: bold;
border: none;
color: #000;
}
#primary a.hover { color: #03f; }
#primary a.active {