CSS Image Replace : Active State

For my primary and secondary navigation I am NOT using Wayfinder. Really no point in this case. So I’m using CSS image replacement for my nav buttons. All works well except for not being able to show the "Active" state. Anyone find a solution for this? Hover works fine. It’ as if it is not reading the current DOM as the current active page.

here is a snippet of my code:

#topsubnav-about a.staff{background:url(../images/bkg-subnav-about.png) -200px 0;width:100px;}
#topsubnav-about a.staff:hover{background:url(../images/bkg-subnav-about.png) -200px -38px;}
#topsubnav-about a.staff:active{background:url(../images/bkg-subnav-about.png) -200px -76px;cursor:default;}

Any ideas? I am having this same issue with several different sites with clients complaining. Would be nice to have a fix. Thanks in advance.

Hi Tobys,

:active is not going to add a style to the current page you are on e.g. http://www.cssdog.com/css_pseudo-class-active.html

Thanks Sharkbait. I’ll check out the link.

This is the CSS navigation example: http://www.sohtanaka.com/web-design/active-state-in-css-navigations/
Apparently the body tag has to have an identifier ID that matches the ID within the CSS.
I’ve done this, but it still doesn’t work. Maybe I have to convert this into a Wayfinder afterall?