Question

I am working with this page :
glustik.com/dustreeproductions/index.php

I am trying to make the “active-page” navigation show as such the “active-page”.

I have a body ID tag of body_company in the markup.

Here is the CSS Rules for the first Nav Button : Company

background:url(../images/navigation/nav-company.png) no-repeat;
display:block;
text-decoration:none;
width:103px;
margin:20px 27px 0 20px;
height:20px;}
#nav ul li#company a:hover {
background-position:0 -20px;}
#nav ul li#company a:active {
background-position:0 -40px;}
body #body_company #company a {
background-position:0 -40px;}

Relavant HTML Markup :

body id="body_company"

I have tried a few different things, cant seem to get it to show an active state when its on the page.

Answer 1

You have a space between body and #body_company, it should be:

body#body_company #company a {

or just:

#body_company #company a {

Edit: An additional problem: The selector for the “normal” state #nav ul li#company a has a higher specificity / value than the active selector:

#nav ul li#company a

scores higher in the cascade than:

body#body_company #company a

So you would have to use:

#company a    /* for the normal state */

or something like:

body#body_company #nav #company a    /* for the active state */

I would recommend just using #company a for the normal state, if your ID’s are unique (they should be anyway…), that´s specific enough.