Help with CSS CLASS vs ID override

Hi friends,

Please take a look at my in-progress web re-design at http://www.jessestern.com/newsite

Please view using Firefox, because I have not yet even begun to debug with IE.

My question: In the nav menu, I am using PHP to set a class ="currentpage" to the current page's <li> tag. I am using id's in the <li> tags to load the background images, and i need to access the currentpage to move the background-position. Basically, a 3-way switch, but I can't get the code to listen to .currentpage.

I probably have the wrong understanding of how classes override id's, or how the whole hierarchy thing works in css, so any pointers would be most appreciated.

Code:

<li id=about<?php if ($this_page=="About")
            echo " class=\"currentpage\""; ?>>
   <a href="index.html">
      <span>
         <em>About</em>
      </span>
   </a>
</li>

and

Code:

#menu li a { 
   display:block; 
   height:25px; width:120px; 
   background-position:center -28px; 
   cursor:pointer; 
}

/* I want the next line to override the background-position 
of the previous line, forcing the top of the image to show 
(instead of the image at -28px) */

#menu li .currentpage a { 
   background-position:center top;
}

#menu li a:hover span { 
   display: block; 
   position: relative; 
   width:180px; 
   height:48px; 
   left:-34px; 
   top:-8px; 
   z-index: 1; 
   background-position:center bottom;
}

#menu li#about a, #menu li#about a:hover span { 
background-image:url(about.png); 
}

And since this is a review thread, I welcome any feeback on my site's humble design....

Oh, and if it helps, here are the source files in question:
http://www.jessestern.com/newsite/index.html
http://www.jessestern.com/newsite/style/style.css
http://www.jessestern.com/newsite/style/about.png

 

Try removing the space between 'li' and '.currentpage' like this:

Code:

#menu li.currentpage a { 
   background-position:center top;
}

HTH,
JC

 

Cha-ching!

I removed the space, and it did exactly what I wanted.

Thanks for the easy fix!

js