CSS sprite active state no working?

Question

can anyone help me find out what the problem is? I'm trying to make the active state of the css sprite work.

At the moment, it is not doing anything

HTML

<ul id="nav">
    <li id="Contact"><a href="contact.html">Contact</a></li>
    <li id="Manual"><a href="manual.html">Manual</a></li>
    <li id="FAQ"><a href="faq.html">FAQ</a></li>
</ul>

CSS

#nav {
    background:url("../img/nav_final.png") no-repeat;
    width: 372px;
    height: 47.5px;
    margin: 70px auto;
    margin-bottom:25px;
    padding: 0;
}

#nav li, #nav a {
    height: 47.5px;
    display: block;
}

#nav li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#Contact { width: 120px; }
#Manual { width: 140px; }
#FAQ { width: 112px; }

#Contact a:hover, #Contact a:active { background:url("../img/nav_final.png") 0px -47.5px no-repeat; }
#Manual a:hover,  #Manual a:active  { background:url("../img/nav_final.png") -118px -47.5px no-repeat; }
#FAQ a:hover,  #FAQ a:active  { background:url("../img/nav_final.png") -260px -47.5px no-repeat; }

Thanks for reading

open firebug and look at the 'ul id="nav"' and see if the background image is loading if not then troubleshoot the image path. — CBRRacer, Apr 09 '12 at 13:15
the path works as the hover state works. Just not the current states — John Smith, Apr 09 '12 at 13:27

score 0 · Accepted Answer · answered Apr 09 '12 at 13:22

0

The :active selector is when you have the mouse key pressed down. Not when you are at the actual link location.

answered Apr 09 '12 at 13:22

Are there any ways to fix this? – John Smith Apr 09 '12 at 13:28
You can make a class called: active. And then add that class to the link that is active in the html-file or with javascript or a server-side script. – Apr 09 '12 at 13:32

score 0 · Answer 2 · answered Apr 09 '12 at 13:29

0

Try defining the background-image on the links inside the nav. Also a background-repeat: no-repeat causes problems when using negative positioning.

Here is a reduced test-case

answered Apr 09 '12 at 13:29

drublic

963
7
9

CSS sprite active state no working?

2 Answers2