Messed up links! Please help!

[equang]

Okay, so I have this site, Just a Boy (http://www.justaboy.equiangular.net), and I put all the style into the CSS. And everything works fine. Except for the links!

The main links work great, but I have one div layer where I need to make the links a different color or else they blend in with the background too much. So I made a separate class for it and put class="menu" into the div tag.

HOWEVER, it didn't work! In IE, the a:link, a:active, and a:visited works but the a: hover comes out a different color than what I put (it comes out the color of the main links). In Mozilla, a:link, a:active, and a:visited work, but a:hover just doesn't work at all.

It's like wires got crossed or something.

This is the CSS coding for the main links:

A:link
{ text-decoration: none; color:#567F93; font-weight: bold; }
A:visited
{ text-decoration: none; color:#567F93; font-weight: bold; }
A:active
{ text-decoration: none; color:#567F93; font-weight: bold; }
A:hover
{ text-decoration: none; color:#8DBDC5; font-weight: bold; }

Those work fine where they're supposed to.

And this is the class I made:

.menu a,
.links a:link { text-decoration: none; color:#D5E5F5; font-weight: bold; },
.links a:visited { text-decoration: none; color:#D5E5F5; font-weight: bold; },
.links a:active { text-decoration: none; color:#D5E5F5; font-weight: bold; },
.links a:hover { text-decoration: none; color:#567F93; font-weight: bold; },

Obviously, #567F93 does not equal #8DBDC5!

I also have a separate small class on one link that looks like this:

.contactlink {margin-right: 5px !important; margin-right: 0px;}

Could that be messing it up?

If anybody knows anything about this, please help.

equang

[techniArtist]

Here's how I redefined it, and it seems to work A-Okay:

a:link, a:visited, a:active
{ text-decoration: none; color:#567F93; font-weight: bold; }
a:hover
{ text-decoration: none; color:#8DBDC5; font-weight: bold; }

.menu a:link, a:visited, a:active { text-decoration: none; color:#D5E5F5; font-weight: bold; }
.menu a:hover { text-decoration: none; color:#567F93; font-weight: bold; }


That displays fine in Mozilla standard Firefox. Looks like it didn't like the way you were gangings things. Hope that helps.

[equang]

Okay that makes the menu work great in both browsers! Thanks!

However now the table links are messed

Any ideas?