...

View Full Version : active tab problem in css tab navigation



malthus23
05-04-2010, 12:24 PM
Hi,

I can't make my active tab look 'active' in my navigation. I have the following css:


#tab_menu {
width: 200px;
margin-top: 10px;
}

#tab_menu li a {
height: 24px;
text-decoration: none;
color: #484848;
display: block;
background: url(../images/tab_menu.gif);
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}

#tab_menu li a:hover {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}

.active {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}


with the following html:



<div id="tab_menu">
<ul>
<li><a class="active" href="link.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 3</a></li>
</ul>
</div>


Any help welcomed!
M.

abduraooft
05-04-2010, 01:26 PM
Try
#tab_menu li a.active {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
Read "CSS specificity (http://htmldog.com/guides/cssadvanced/specificity/)"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum