homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

default link color showing up on list menu
How to fix it so default link color doesn't show up?

 2:17 am on Feb 9, 2013 (gmt 0)

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 {
margin:0 auto 0 auto;
background: #006699; }

#topmenu ul {
padding:1px 0;
margin:0px; }

#topmenu li {
padding:0 55px 0 55px; }

#topmenu li a:link, visited {
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-size:12px; }

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


<div id="topmenu">
<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>



 4:56 am on Feb 9, 2013 (gmt 0)

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.


 4:24 pm on Feb 9, 2013 (gmt 0)

#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 {


 4:33 pm on Feb 9, 2013 (gmt 0)


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


 11:24 pm on Feb 9, 2013 (gmt 0)

... 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


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

It thought the css meant

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

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved