Grow your CSS skills. Land your dream job.

noob nav issues

  • # April 29, 2009 at 8:01 pm

    Hey guys,

    I have an issue that I’m pretty sure isn’t that big of a deal to figure out, but I can’t seem correct it. My navigation is suppose to highlight when you mouse over it. It actually works in Firefox but doesn’t work in any other browser I’ve tested. I’m using a special font so I’m using images instead of just straight text.

    This is my absolute very first full css site. I built it from scratch so I’m more than positive there are a load of rookie mistakes. Some of which I’m already aware of.

    So here’s the link: http://production.wearecaffeine.com/ubh/

    Here’s my html code:

    I have this wrapped in a div – which I now know you don’t have to do since they are both block level elements…I think that’s right anyways.

    Here’s the css for just the classes li

    Code:
    .menu li{
    float:left;
    text-indent: -9999px;
    }
    .menu li a{
    display:block;
    text-decoration:none;
    }

    li#classes{
    background:url(images/classes.png) 0 0 no-repeat;
    width:57px;
    height:19px;
    }

    li#classes a:hover{
    background:url(images/classes_over.png) 0 0 no-repeat;

    Like I said earlier, I’m completely new to css so be gentle. Thanks in advance

    # April 30, 2009 at 2:33 am

    The first thing I notice is that you have your list items inside your anchor links – it should be the other way around.

    Code:
  • Classes

Then in your CSS you have your background on the list item but for the hover state you have it on the link itself – they should both be on the link, thus:

Code:
li#classes a{
background:url(images/classes.png) 0 0 no-repeat;
width:57px;
height:19px;
}

li#classes a:hover{
background:url(images/classes_over.png) 0 0 no-repeat;
}

# April 30, 2009 at 5:36 pm

maaaannnn…..that’s what happens when you are up all night look at code. Man thanks for your help, you’re a life saver.

Your advice worked like a charm!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".