wrong visited link colors

problem w/ visited link colors under a particular div

[madmatter23]

I'm having a problem that I assume has an obious explanation or simple remedy, but I really cannot figure out what is wrong. I have set my standard link colors as:

a:link, a:visited{
color: #FF9900;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #FFE900;
} 
a:active {
text-decoration: none;
color: #FF9900;
}

The main body links work fine. I then defined link colors for a particular div:

#pageNav a:link, #pageNav a:visited, #pageNav a:active{
display: block;
color: #000000;
text-decoration: none;
padding: 8px 3px 0px 10px;
}
#pageNav a:hover{
text-decoration: none;
color: #FF9900;
padding: 8px 3px 0px 10px;
}

Strangley, all but the visited link colors correctly change from the standard orange color to black. I can't understand why my visited links in the #pageNav div are stilling showing up orange while the link and active colors have been successfully set as black. I would think that it would be all or nothing because I defined them all together. Anyone have any ideas? All help appreciated.

[graykat]

have you tried to split the first command?

a:link, a:visited{
color: #FF9900;
text-decoration: none;
}

perhaps use

a:visited{
color: #FF9900;
text-decoration: none;
}

a:link{
color: #FF9900;
text-decoration: none;
}

that should break the cascade for a general visited link.

[penders]

Hi madmatter23, I tried your CSS and it seems to work as intended: "...the visited link colors correctly change from the standard orange color to black".

The HTML I tried this with:

<p>[<a href="http://www.example.com">This is a link in the body</a>]</p> 
<div id="pageNav"> 
<p>[<a href="http://www.example.com">This is a link in #pageNav</a>]</p> 
</div>

May be you have an overriding style elsewhere in your CSS?

Just to note on your 2nd set of styles... "a:active should come after a:hover in the CSS in order to be effective".

Also, since you are styling :link, :visited and :active all the same, why not simply style the 'a' element, such as...

a { 
color: #FF9900; 
text-decoration: none; 
} 
#pageNav a { 
display: block; 
color: #000; 
padding: 8px 3px 0px 10px; 
}