3 different color links all revert to default

How do I get 3 separate link colors?

[Lorel]

I have links in 3 different areas set in 3 different colors but it always revert to the default link. I even removed the default settings and it reverted to browsers default purple and blue.

Is there something wrong with my code?

Top Menu Links:

a.topmenulinks:link {color: #000000;
text-decoration: none;
font-size:12px; }
a.topmenulinks:visited {color: #000000;
text-decoration: none;
font-size:12px; }
a.topmenulinks:hover { color: #996600;
text-decoration: none;
font-size:12px; }
a.topmenulinks:active { color: #996600;
text-decoration: none;
font-size:12px; }

MENU LINKS:

.click-menu .box1 {
background-color: #669900;
color: #cccc99;
font-size: 12px;
font-family: Verdana;
padding: 4px 8px;
cursor: default;
position: relative;
}
.click-menu .box1-hover {
background-color: #cccc99;
color: #cccc99;
font-size: 12px;
font-family: Verdana;
padding: 4px 8px;
cursor: default;
position: relative;
}
.click-menu .section {
background-color: #666600;
font-family: Verdana;
font-size: 12px;
line-height: 15px;
padding: 5px 5px 6px 5px;
display: none;
}
.click-menu .section a {
color: #cccc99;
text-decoration: none;
white-space: nowrap;
}
.click-menu .section a:hover {
color: #cccc99;
text-decoration: none;
white-space: nowrap;
}

DEFAULT LINKS:

a:link {color: #000000;
text-decoration: none;
font-size:12px; }
a:visited {color: #000000;
text-decoration: none;
font-size:12px;}
a:hover { color:#996600;
text-decoration: none;
font-size:12px; }
a:active { color:#996600;
text-decoration: none; }

[swa66]

Try reducing the CSS to it's minimum that still has the problem. (you seem to have statement that are in the shadow of others)

I'd suggest to add:

a {text-decoration: none; color:black;}

I generally only do layout on the a and the a:hover and leave most of the rest alone.

Actualy from a live layout:
[code]
a.subtle {text-decoration: none; color:black;}
a:hover {color:red; }
[code]
Remember that people in general expect links to be blue/purple I use the subtle class to add links that people very interested can follow without distracting from the flow of the text (the hover coloring it red just like the other links makes them click it).

[iamlost]

Note: lacking your actual HTML code I reverse engineered from the CSS.

The links looked/changed fine.
Therefore there may be a disconnect between your CSS and HTML.
Can you post a relevant snippet?

[Lorel]

thanks for trying to help. I didn't understand your earlier comments.

I have posted the relevant html below however I left out the link code as that would be a monumental job to post it all anonomously. I'm only concerned with topmenulinks, leftmenulinks and footerlinks.

<div id="topmenubox">
<div align="center" class="topmenulinks">
top horizontal menu links go here
</div>
</div>

<div class="bodybox">

<div id="leftbox"><br>
vertical drop down menu links go here called up with id="click-menu1" class="click-menu" in table.
</div>

<div id="rightbox">
Right box text goes here.
</div>

<div id="content">
main body content goes here
</div>

</div>

<div id="footer">
<p align="center" class="footer">
Footer links go here
</p>
</div>

[iamlost]

Your HTML and CSS are in conflict:

1. Your HTML has 'topmenulinks' as a class for the div containing the links so the CSS should be: .topmenulinks a:link {<>}

To use a.topmenulinks:link {<>} the HTML should remove 'topmenulinks' from the div and use with each link:
<a href="x" class="topmenulinks">TopMenuLink1</a>
<a href="x" class="topmenulinks">TopMenuLink2</a>

Going out for dinner...will look at your drop-down afterwards but looks similar.

[Lorel]

Swa66:

I generally only do layout on the a and the a:hover and leave most of the rest alone.

the owner of this site has very specific color arrangements re link and hover and background and link colors, etc.

Iamlost

I've been trying all sorts of different things but still nothing has affected the link colors.

I added class="whatever link class applies" to every link on the page instead of putting it in the main div surrounding the links but the left menu links are still picking up the colors of the default links (the other two link classes are supposed to use the default specifications)

I had to leave the class="click-menu" in the main click-menu div or it destroyed all the formatting for that "box".

I've seen several articles re having several sets of links and they all say to list them as :

a:class:link

Can you explain why you recommend it this way:

.class a:link?

I can send the url of this page if someone wants to look at the code online.

[edited by: Lorel at 11:02 pm (utc) on Sep. 19, 2006]

[iamlost]

I've seen several articles re having several sets of links and they all say to list them as :

a:class:link

Can you explain why you recommend it this way:

.class a:link?

It is a matter of grammar and syntax.

a.class:link means apply the following attributes to any anchor link of class .class. The class is defining the individual <a>.
Thus

<div>
<a href="x" class="class">Link1</a> /* applied */
<a href="x" class="class">Link2</a> /* applied */
<a href="x" class="another-class">Link3</a> /* not applied */
<a href="x" class="class">Link4</a> /* applied */
</div>

However in your example code the class .class was not applied to the anchor and link directly. It was applied to the <a>'s containing <div>.
Therefore it should have been written:
.class a:link
meaning apply the attributes to any and all anchor links within the parent container (a <div> in your code) of class .class. (unless overridden by a more specific style i.e. applied directly to an anchor)
Thus:

<div class="class">
<a href="x">Link1</a> /* applied */
<a href="x">Link1</a> /* applied */
<a href="x" class="another-class">Link1</a> /* not applied */
<a href="x">Link1</a> /* applied */
</div>