Jump to content

Recommended Posts

Posted (edited)

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
Posted (edited)

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

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

Posted
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;

    }

    Posted (edited)

    :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

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