Can't stop link from inheriting traits

[CloudedVision]

My navigation is contained in a div with the id #nav. I stylize the links like so:

Code: Select all

#nav a,
#nav a:link,
#nav a:visited,
#nav a:active {
    padding:0 0 0 5px;
    border-left:#FF0000 3px solid;
    color:#000000;
    text-decoration:none;
    display:block;
    width:100px;
}

#nav a:hover {
    background:#FFCC99;
    color:#000000;
}

Pretty simple, and it works. But I also have an image link the I don't want inheriting all those traits thats in the #nav div. So I write a CSS class to override the #nav links. It's like this:

Code: Select all

#otherroad,
#otherroad:link,
#otherroad:visited,
#otherroad:active,
#otherroad:hover {
    background:none;
    color:#000;
    text-decoration:none;
    border:none;
}

And I write the link like this:

HTML: Select all

<a href="http://www.otherroaddesign.com/" id="otherroad"><img src="/assets/images/otherroaddesign.gif" alt="Designed Pro Bono By Other Road Design" /></a>

It should work, right? But for some reason it still inherits the properties from #nav, and ignores the override. Why is it doing this?

You can view the full page here.

[frinkky]

it'd be #otherroad a:link, #otherroad a:visited etc.

To get rid of borders around image links i just stick this ner the top of my css file to remove all:

Code: Select all

a img {
border:none;
}

[CloudedVision]

its not the image border links I'm worried about, I've already taken care of that. It's that #otherroad seems to be overridden by #nav, even though it should be exactly the opposit way around.

[CloudedVision]

fixed it using !important. still don't know why it inherited styles like that.....

[frinkky]

Sorry, must have misundertood you

[moojoo]

#nav li a img {} or something like #nav li#foo a {} whatever, you just need to correctly target it.