default link color showing up on list menu

How to fix it so default link color doesn't show up?

[Lorel]

I've been working on this horizontal list menu all day. It's working the way I want except it's picking up the default link color for the home link and I haven't been able to figure out whats causing it.

Can anyone see what's wrong?


#topmenu {
padding:0;
width:90%;
margin:0 auto 0 auto;
height:25px;
text-align:center;
font-size:14px;
background: #006699; }

#topmenu ul {
list-style-type:none;
height:auto;
padding:1px 0;
margin:0px; }

#topmenu li {
display:inline-block;
height:25px;
line-height:25px;
padding:0 55px 0 55px; }

#topmenu li a:link, visited {
color:#ccffff;
font-weight: normal;
font-size:14px; }

#topmenu li a:hover, active {
color:#99ccff; }




a:link, visited {color: #066086;
font-weight: normal;
background: transparent;
text-decoration: none;
font-weight:bold;
font-size:12px; }

a:hover, active {color: #666666;
font-weight: normal;
background: transparent;
text-decoration: none;
font-weight:bold;
font-size:12px; }

-------HTML-------


<div id="topmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="photo-gallery.html">Photo Gallery</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

[lucy24]

You may be making it more complicated than it needs to be. Color, font-weight and font-size are almost always inherited, so why not start with a basic

#topmenu a {your generic topmenu values here}

and then go to the more specific

#topmenu a:hover, #topmenu a:active {different stuff here}

It is safest to spell out the whole thing each time, even if the validator doesn't object. (Odd. I thought it would.)

Try to lay out your css from general to specific. Later rules will override earlier rules if you don't have all the right constraints in place. So first give the generic a: properties, and then the ones you want to be different.

[Fotiman]

#topmenu li a:link, visited {

Should be:
#topmenu li a:link, #topmenu li a:visited {
Note, you can't write just "visited", you need the a: preceeding it. You also forgot the rest of the selector leading up to it. You did this several times, including these ones:

#topmenu li a:hover, active {

a:link, visited {

a:hover, active {

To help avoid this, I find it helpful to put each selector on it's own line. That makes it more obvious when you forget part of the selector. Rewriting your code above, it would look like this:

#topmenu li a:link, 
visited { 

That makes it more obvious that you're missing something. Correcting it, it looks like this:

#topmenu li a:link, 
#topmenu li a:visited { 

[Lorel]

@fotiman

Ahhh! That was the cause of the problem. Thanks. It's working now.

[lucy24]

... and a belated "D'oh!" here as I realize that the reason the validator didn't object is that it couldn't read your mind. It didn't know that

#topmenu li a:hover, active

meant

#topmenu li a:hover
AND
#topmenu li a:active

It thought the css meant

#topmenu li a:hover
AND
{some nonexistent element called <active>}

because html and css are different animals and generally don't talk to each other.