How to override the font color in a menu

[Susie 1]

I know this is easy, but for some reason, I can't get it. How can I override the font color in this menu for specific ID's? In other words, I have a #leftnav ul. I'm going to target some of the items by ID and change their colors. The new ID is in bold below. Nothing I do changes the color. I can make it bold, italicized, etc., but I can't change the color. :/

 

#leftnav {

list-style:none;

font-family:Georgia, "Times New Roman", serif;

font-size:1.4em;

margin:0px 0 0 20px;

padding-top:20px;

}

#leftnav li {

display:block;

padding:8px 0;

background:url(images/left-dots.png) 0 30px no-repeat;

}

#leftnav li a, #leftnav li a:visited {

text-decoration:none;

color:#000;

}

#leftnav li a:focus, #leftnav li a:hover, #leftnav li a:active {

text-decoration:none;

color:#87277b;

}

#leftnav li#our-classes {

color:#fff;

}

Edited March 19, 2009 by Susie

[PicnicTutorials 4]

Put it on the anchor. li a#id

[Susie 1]

Thanks, Eric. I tried that at one point, and it didn't work...

 

#leftnav li a#our-classes {

color:#fff;

}

[PicnicTutorials 4]

Thanks, Eric. I tried that at one point, and it didn't work...

 

#leftnav li a#our-classes {

color:#fff;

}

 

Hi Susie. Like this...

 

 

• Test

• Test
• Test

Edited March 19, 2009 by Eric

[Wickham 8]

#leftnav li a#our-classes {

color:red;

}

#leftnav li a#our-classes:hover {

color:#87277b;

}

 

Check that IE6 operates this as the hover isn't directly on the "a" tag, or is it? (Edit: it does work in IE6).

 

I would put a class on the individual li tag which I think is safer for IE6:-

• Test

• Test
• Test

 

.our-classes a {

color:red;

}

.our-classes a:hover {

color:#87277b;

}

 

Using a span tag works in modern browsers but does not work in IE6:-

• Test

• Test
• Test

 

.our-classes2 { color:red; }

.our-classes2:hover { color:#87277b; }

Edited March 19, 2009 by Wickham

[Susie 1]

Thanks, guys. This is so bizarre. I should be able to do this!

 

7: Our Classes

 

#our-classes a{

color:#fff;

}

 

 

And still nothing.

Edited March 19, 2009 by Susie

[Susie 1]

Actually, I just found out the above DOES work in IE 7 (haven't checked 6 yet), but does NOT work in Fx, Opera, or Safari. How weird!

 

I'm sure it'll be easier if you can see the actual page. I'm just testing on "Our Classes" only right now. It won't actually be white when all is said and done.

 

http://tinyurl.com/decll9

[PicnicTutorials 4]

Thanks, guys. This is so bizarre. I should be able to do this!

 

7: Our Classes

 

#our-classes a{

color:#fff;

}

 

 

And still nothing.

 

Your having a specificity issue. Use the same code as I have above and it will work. Like this instead. Or how Wickman said - on the li#our-classes a. But either way, write it all out.

 

#leftnav li a#our-classes {

color:red;

}

#leftnav li a#our-classes:hover {

color:#87277b;

}

[Susie 1]

Thanks. I feel so dumb. lol

 

This is it:

 

#leftnav li#our-classes a{

color:#fff;

}

 

ETA: Which I had last night, but I was missing the a. :/

Edited March 19, 2009 by Susie

[PicnicTutorials 4]

Your welcome love my phone!

 

Edit - but still getting used to it's keyboard.

Edited March 19, 2009 by Eric