Jump to content
Stef's Coding Community
Susie

How to override the font color in a menu

Recommended Posts

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 by Susie

Share this post


Link to post
Share on other sites

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

 

#leftnav li a#our-classes {

color:#fff;

}

Share this post


Link to post
Share on other sites

#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:-

 

.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:-

 

.our-classes2 { color:red; }

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

Edited by Wickham

Share this post


Link to post
Share on other sites

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 by Susie

    Share this post


    Link to post
    Share on other sites

    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

    Share this post


    Link to post
    Share on other sites
    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;

    }

    Share this post


    Link to post
    Share on other sites

    :rolleyes: 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 by Susie

    Share this post


    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

    ×
    ×
    • Create New...