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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Hover state issue (hierarchy maybe?)

    Hi all,

    I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either!

    http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1.

    This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't!

    The second issue is that I can't control the space between the tabs.

    Can anyone help?

    Thanks!
    Denis

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #wrapper a:hover, #action-nav, #action-nav a {/*residential.css (line 8)*/
    color:#005AC3;
    }
    .tabs ul.list a:hover {/*residential.css (line 24)*/
    background:#0099FF none repeat scroll 0;
    }
    The above two are overriding your
    Code:
    .tabs ul.list a:hover {/*generic.css (line 200)*/
    color:#FFFFFF;
    }
    See the specificity rules at http://htmldog.com/guides/cssadvanced/specificity

    PS: Get a copy of firebug, to inspect your elements on the run!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    abduraooft thanks for the input. The specificity article put my head straight! I just needed to reference the #wrapper as below!

    #wrapper .tabs ul.list a:hover
    {
    background:#0099ff;
    color: #fff;
    }


  •  

    Posting Permissions

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