Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    active tab problem in css tab navigation

    Hi,

    I can't make my active tab look 'active' in my navigation. I have the following css:
    Code:
    #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:

    Code:
    <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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #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"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •