Treehouse: Grow your CSS skills. Land your dream job.

LINKS or hover states not working in all browsers BUT IE.

  • # April 10, 2011 at 4:01 pm

    Yes, you read that correct! I cannot, for the life of me, figure this out! I’m working on a page, right here , that I just can’t get the links or the hover states for them, to work. I’ve tried in Firefox, Chrome, Safar, and IE7/8. They do exactly what they should in IE, but nothing happens in the good browsers. The links aren’t even links in the other browsers. I’ve stared at my code for an hour now. Can anyone help me with this before I lose my mind!?
    Here is the code I’m working with:

    Preeminent Productions Store


    nav ul{
    margin:60px 0 0 170px;

    nav li{
    text-align: left;
    float: left;
    text-shadow:2px 3px 3px #000;

    nav li a{

    nav li a:hover{
    text-shadow:0px 4px 0px #000;
    cursor: pointer;


    # April 10, 2011 at 4:03 pm

    oh and please also keep in mind, that I’ve played around with different variations too. I’ve tried using the .gation class instead of using “nav”. In other words: “ul.gation li a” instead of just “nav li a”. Neither makes a difference!

    # April 11, 2011 at 2:59 am

    using just the code and ccs you gave here the hover affect works fine, must be something else on the page. When I tried to target one of the links on the page you linked with firebug it would only let me select div#slider so that might be interfering somehow.

    # April 11, 2011 at 5:09 am

    As DogsGhost says, your #slider div is interfering with the nav because it’s positioned on top of it. As you have floated the list items you need to clear the slider properly by using an overflow:hidden on the nav ul

    # April 11, 2011 at 7:25 pm

    AGH! haha, thank you guys! That’s what I get for re-using my last projects template. I used a lot of the same code and forgot about the slider! I appreciate it!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.