greg wrote: or do I call

Megan — Wed, 29 Apr 2009 16:19:07 +0000

greg wrote:

or do I call id="home" class="current" in the same element?

Yes, you can try that (I'm not 100% sure if #home.current will work in all browsers...). The second part of my solution there was to put the identifiers on different elements (the ID on the li and the class on the a) which gets around that problem.

Why do you think you need to change them to classes? If they are unique elements that don't appear elsewhere on the page they should be id's.

I do usually put the text in

greg — Wed, 29 Apr 2009 15:36:11 +0000

I do usually put the text in with HTML, but on this occasion because of the way I designed the navigation images I had to do it this way, well, "wanted" to is a better word.

I'll have a go at your suggestions, although I presume I need to change both to classes.
.home to #home
and
.current to #current
or do I call id="home" class="current" in the same element?

So, basically what you're

Megan — Wed, 29 Apr 2009 15:06:35 +0000

So, basically what you're trying to do is apply two classes to an element and target them both in CSS, is that right? Why don't you use id's for the link titles? That would make it easier to do this. So instead of a home class it would be a home id (I'm assuming there is only one instance of this navbar on the page). In that case something like this would work:

#home.current (no space here)

I *think* this works - possibly not in older browsers though. Will have to check.

Or you could put the ID on the li and the .current on the a, so you'd have this

li#home a.current

or more simply

#home .current (notice the space)

Why is the text in the image anyway? Is it using a special font? Much easier to keep the text in HTML if possible (and better for accessibility, search engines etc.). Or are you doing an image replacement technique?

did you notice the active

decibel.places — Wed, 29 Apr 2009 14:59:57 +0000

did you notice the active class a.active in the code sample?

you know the drill, a link or some more complete code will help!

I still think you should apply the pseudoclasses to the a tag and not to li....

Thanks, but :active isn't

greg — Wed, 29 Apr 2009 14:37:15 +0000

Thanks, but :active isn't really what I need.

I have two images for each page ("Home" "about" "contact" etc).
Per page I have one image for "not active" and "not current" and another image for "active" and "current".
Setting the image for non-active and non-current is fine, as is setting the other "active" image for :active, but I cannot tie the "current" to each image.

So when the user is on homepage, the CSS needs to know to use "home_active.png". for that I need it to know class="home current". As said, in the html that is done (with PHP), but I cannot get the CSS to tie ".home" class with ".current" class so when the HTL states "class='home current'" it will display the current image rather than the non-current and non-active one.

(As it happens, I use the active image for the current one too)

It has been driving me round the bend for hours now.

I usually apply the hover

decibel.places — Wed, 29 Apr 2009 13:32:22 +0000

I usually apply the hover and active pseudoclasses to the a element, without classes:

#main_nav li a:hover, #main_nav li a:active

should work with the class added:

#main_nav li a.home:hover, #main_nav li a.home:active

from W3Schools:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

the menu for this (Drupal!) site using a.active:

li#menu-479 a {background: url('/sites/default/files/theme/meier_btn_01_a.gif')}
li#menu-479 a.active, li#menu-479  a:hover {background: url('/sites/default/files/theme/meier_btn_01_b.gif')}

li#menu-739 a { background: url('/sites/default/files/theme/meier_btn_02_a.gif')}
li#menu-739 a.active, li#menu-739  a:hover {background: url('/sites/default/files/theme/meier_btn_02_b.gif')}


li#menu-481 a {background: url('/sites/default/files/theme/meier_btn_03_a.gif');}
li#menu-481 a.active, li#menu-481 a:hover {background: url('/sites/default/files/theme/meier_btn_03_b.gif');}

li#menu-482 a {background: url('/sites/default/files/theme/meier_btn_04_a.gif');}
li#menu-482 a.active, li#menu-482  a:hover {background: url('/sites/default/files/theme/meier_btn_04_b.gif');}

you may need to add padding to the a elements to display the bg image properly

ul.nice-menu li#menu-479 a {
padding: 14px 9px 25px 9px;
}

ul.nice-menu li#menu-739 a{
margin-left: 4px;
padding: 14px 17px 25px 24px;
}

ul.nice-menu li#menu-481 a {
margin-left: 4px;
padding: 14px 17px 25px 24px;
}

ul.nice-menu li#menu-482 a {
margin-left: 4px;
padding: 14px 43px 25px 8px;
}