Different colour links with CSS?

Links keep on defaulting to normal blue

[lateatnight]

I'm having some headaches trying to set up different coloured links on a page with CSS. I've done a search and tried out some solutions posted in other threads, but no luck.

I have a menu (.menu) where I want the links to appear in black, and another section (.panel) where I need the links to be white. And so I tried the following:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 10px 0px 0px;

}
a.menu:link {color: #000000;}
a.menu:visited {text-decoration: none; color: #666666;}
a.menu:hover {text-decoration: underline; color: #FF6600;}
a.menu:active {text-decoration: none;}

.panel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 0px;
padding-left: 12px;

}
a.panel:link {color: #FFFFFF;}
a.panel:visited {text-decoration: none; color: #FFFFFF;}
a.panel:hover {text-decoration: underline; color: #FFFFCC;}
a.panel:active {text-decoration: none;}

Now, when I code a blank page with just this CSS, it works fine. But when I put it into the page that I really need it for, it doesn't work. It defaults to the standard blue link colour and doesn't recognize the CSS I established above. I have double-checked for anything that would interfere with the CSS, but there is nothing. I tried setting all of this up in a separate CSS file, and then again on the page, but the result was the same.

Any ideas?

[Ingolemo]

"a.menu:link" would select a-elements that have the class of "menu". Are you sure you don't mean ".menu a:link"?

[lateatnight]

No, I want any <a> tag within that class to display in the colours I coded above (link, hover, visited). Once again, it works just fine in a page that has only that CSS, but when I put it into the page that I really need it for, it defaults back to standard link colours.

[edited by: lateatnight at 9:42 pm (utc) on July 9, 2006]

[doodlebee]

what's the code for the site you want to use this in? SOunds liek you have one of two situations (that I can immediately think of - there's probably more possibilities out there!):

1) you have something in the CSS file that's overwriting the link classes you want, or

2) you're missing a closing bracket somewhere and it's not reading the new CSS stuff.

Have you tried running the CSS file through a validator? That helps a lot in finding stuff like this.

Otherwise, post the actual CSS file you're using (and the HTML) and maybe we can find it. There's not really enough info here to see why it wouldn't be working.

[lateatnight]

Here is all of my CSS. I ran it through Dreamweaver's validator, and it came up clean. On the HTML page, there is *no* CSS set for the page except for some body styles; I just can't figure out why it's reverting to default values with the link colours.

CSS file:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 10px 0px 0px;
}
a.menu:link {color: #000000;}
a.menu:visited {text-decoration: none; color: #666666;}
a.menu:hover {text-decoration: underline; color: #FF6600;}

.panel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 0px;
padding-left: 12px;
}
a.panel:link {color: #FFFFFF;}
a.panel:visited {text-decoration: none; color: #FFFFFF;}
a.panel:hover {text-decoration: underline; color: #FFFF00;}

.panel2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 24px;
padding-bottom: 0px;
padding-left: 12px;
}

.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
padding-left: 15px;
}

And then on the actual page:

<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.jpg); background-repeat-x;
background-color: #E7E6D1;
}
</style>
<link href="third.css" rel="stylesheet" type="text/css">

[edited by: lateatnight at 4:05 am (utc) on July 10, 2006]

[Ingolemo]

Could you post a sample of the HTML?

[lateatnight]

Okay, here goes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="description" content="Description goes here">
<meta name="keywords" content="Keywords go here">

<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.jpg); background-repeat-x;
background-color: #E7E6D1;
}
</style>
<link href="third.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td colspan="2"><img src="images/top_top.png" width="780" height="30"></td>
</tr>
<tr align="left" valign="top">
<td width="350"><img src="images/flash_bg.png" width="350" height="80"></td>
<td width="430"><img src="images/logo.png" width="430" height="80"></td>
</tr>
<tr align="left" valign="top" background="images/menu_bg.png">
<td width="350" valign="top" background="images/menu_bg.png"><img src="images/menu_left.png" width="22" height="40" align="top"><span class="menu">Home</span><img src="images/menu_divider.png" width="12" height="40" align="top"><span class="menu"><a href="services.htm">Services</a></span><img src="images/menu_divider.png" width="12" height="40" align="top"><span class="menu"><a href="portfolio.htm">Portfolio</a></span><img src="images/menu_divider.png" width="12" height="40" align="top"><span class="menu"><a href="about.htm">About</a></span><img src="images/menu_divider.png" width="12" height="40" align="top"><span class="menu"><a href="contact.htm">Contact</a></span><img src="images/menu_divider.png" width="12" height="40" align="middle"></td>
<td width="430" background="images/menu_bg.png"><div align="right"><img src="images/menu_right.png" width="30" height="40"></div></td>
</tr>
</table>
<div align="center">
<img src="images/main01.png" width="780" height="190"></div>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="210" align="left" valign="top"><img src="images/head_news.png" width="210" height="50"></td>
<td width="355" align="left" valign="top"><img src="images/head_portfolio.png" width="355" height="50"></td>
<td width="215" align="left" valign="top"><img src="images/head_services.png" width="215" height="50"></td>
</tr>
<tr>
<td width="210" align="left" valign="top" background="images/bg_news.png"><p class="panel">Text goes here...</p>
<p align="right" class="panel"><strong><img src="images/go_orange.gif" width="12" height="12" align="top"> <a href="news.htm">Read more...</a></strong></p></td>
<td width="355" align="left" valign="top" background="images/bg_portfolio.png"><p class="panel">Text goes here...</p>
<p align="right" class="panel"><strong> <img src="images/go_green.gif" width="12" height="12" align="top"> Read more... </strong></p></td>
<td width="215" align="left" valign="top" background="images/bg_services.png"><p class="panel2">Text goes here...</p>
<p align="right" class="panel2"><strong><img src="images/go_blue.gif" width="12" height="12"> Read more...</strong></p></td>
</tr>
<tr>
<td width="210" align="left" valign="top"><img src="images/btm_news.png" width="210" height="20"></td>
<td width="355" align="left" valign="top"><img src="images/btm_portfolio.png" width="355" height="20"></td>
<td width="215" align="left" valign="top"><img src="images/btm_services.png" width="215" height="20"></td>
</tr>
</table>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img src="images/btm_top.png" width="780" height="20"></td>
</tr>
<tr>
<td align="left" valign="top" background="images/bg_bottom.png" class="small">&copy;2006 Copyright information</td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/btm_btm.png" width="780" height="20"></td>
</tr>
</table>
</body>
</html>

[Programmers]

To tell you truth mate, I've looked through everything and I can't see a problem with your code. What it might be is the fact that you've not declared a single class in any of the links. Therefore they are just becoming default because you've declared no standard a:link tags.

[Ingolemo]

The problem as I see it, is exactly what I was trying to tell you before. You need to replace the selectors

a.menu:link
a.menu:visited
a.menu:hover
a.menu:active
a.panel:link
a.panel:visited
a.panel:hover
a.panel:active

with

.menu a:link
.menu a:visited
.menu a:hover
.menu a:active
.panel a:link
.panel a:visited
.panel a:hover
.panel a:active

respectively.

You could also benefit from putting a single class="menu" on the table cell element rather then having all those spans around the links.

[edited by: Ingolemo at 12:11 pm (utc) on July 11, 2006]

[lateatnight]

Ingolemo, I tried that, but it still doesn't work. Here is the new CSS:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 10px 0px 0px;
}
menu a:link {text-decoration: none; color: #000000;}
menu a:visited {text-decoration: none; color: #666666;}
menu a:hover {text-decoration: underline; color: #FF6600;}

.panel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 0px;
padding-left: 12px;
}
panel a:link {text-decoration: none; color: #FFFFFF;}
panel a:visited {text-decoration: none; color: #FFFFFF;}
panel a:hover {text-decoration: underline; color: #FFFF00;}

.panel2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 24px;
padding-bottom: 0px;
padding-left: 12px;
}

.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
padding-left: 15px;
}

I did some searching on other forums and tutorial sites, and they all use the same format. For some reason, mine is just not working. >:o¦

[edited by: lateatnight at 3:09 am (utc) on July 12, 2006]

[encyclo]

menu a:link {color: #000000;}
menu a:visited {text-decoration: none; color: #666666;}
menu a:hover {text-decoration: underline; color: #FF6600;}
(...)
panel a:link {color: #FFFFFF;}
panel a:visited {text-decoration: none; color: #FFFFFF;}
panel a:hover {text-decoration: underline; color: #FFFF00;}

You're missing the initial dot (defining a class) for all of the above rules. So you should have:

[b].[/b]menu a:link {color: #000000;}

etc.

It is important to always check your CSS syntax with the CSS validator [jigsaw.w3.org] to avoid and identify problems.

[edited by: encyclo at 3:12 am (utc) on July 12, 2006]

[lateatnight]

HOORAY! Thanks Encyclo!