Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1785
votes: 2


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>
4:56 am on Feb 9, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12702
votes: 244


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)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10



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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1785
votes: 2


@fotiman

Ahhh! That was the cause of the problem. Thanks. It's working now.
11:24 pm on Feb 9, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12702
votes: 244


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