homepage Welcome to WebmasterWorld Guest from 50.17.162.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:4544022
 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 {
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




msg:4544056
 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.

Fotiman




msg:4544197
 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 {

Lorel




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

@fotiman

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

lucy24




msg:4544251
 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

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.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved