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

CSS Forum

    
Different colour links with CSS?
Links keep on defaulting to normal blue
lateatnight




msg:3000268
 5:33 pm on Jul 9, 2006 (gmt 0)

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




msg:3000429
 9:06 pm on Jul 9, 2006 (gmt 0)

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

lateatnight




msg:3000449
 9:36 pm on Jul 9, 2006 (gmt 0)

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




msg:3000604
 1:25 am on Jul 10, 2006 (gmt 0)

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




msg:3000711
 4:04 am on Jul 10, 2006 (gmt 0)

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




msg:3000968
 11:19 am on Jul 10, 2006 (gmt 0)

Could you post a sample of the HTML?

lateatnight




msg:3001923
 12:10 am on Jul 11, 2006 (gmt 0)

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




msg:3001972
 1:19 am on Jul 11, 2006 (gmt 0)

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




msg:3002381
 12:11 pm on Jul 11, 2006 (gmt 0)

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




msg:3003489
 3:03 am on Jul 12, 2006 (gmt 0)

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




msg:3003497
 3:06 am on Jul 12, 2006 (gmt 0)

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




msg:3003500
 3:11 am on Jul 12, 2006 (gmt 0)

HOORAY! Thanks Encyclo!

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