Link not pcicking color etc

HTML & CSS
1

ok. This is doing my head in now.

I am trying to add a link to a page where it has no text decoration until it is hovered over. I also want the colour of the link to be yellow.

It just doesnt seem to be picking it up.

This is the Css page:(the link in question is #newlink)

body{
margin:0;
padding:0;
background-color:#CCCCCC;
}

#wrapper{
width:98%;
margin:0 auto;
border:ridge thick #666666}

#header{
float:left;
width:100%;

background-color:#FFFFFF;
}


#headleft{float:left; width:49%; }
#headright{float:left; width:49%; }
/*--------------------------------------------menu------------------------------------------*/
#menu{float:left; width:1000px; height:29px;  } 
ul.menu{margin:0px;padding:0px;list-style:none;width:1000px; height:28px;float:left;background: url(myimages/menu_but.jpg) repeat-x;}
ul.menu li {float:left;height:28px;}
ul.menu a{display:block; line-height:1.5em; text-decoration:none; width:1000px; font-size:16px; font:Arial, Helvetica, sans-serif;color: #FFFFFF; outline:0;}
ul.menu a:hover{ color:#FFFF00;}
/*---------------------------------------end menu------------------------------------------*/

#mainContent{
float:left;
width:1000px;
background-color:#ffffff;
}
#newlink a:link{color:#FFFF00; text-decoration:none;}
#newlink a:visited{text-decoration:none}
#newlink a:hover{text-decoration:underline;}

.dept{float:left; width:33%; background-color:#ffffff; }
.intro{float:left; background-color:#ffffff; margin-top:10px; }
.service{float:left; background-color:#ffffff; margin-top:10px;}

#footer{
clear:both;
}

/*------------------------------------------pages-----------------------------------------*/
#mainNav{
float:left;
width:15%;
background-color:#99CC66;
}

#content{
float:right;
width:810px;
background-color:#339999;
}

#mainContent{
float:left;
width:65%;
background-color:#ffffff;
padding-top:30px;
padding-left:20px;
padding-right:20px;
}
.maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
.maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
.maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin-left:15%; margin-bottom:10px; border:medium outset #FF3300;}
.maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}

.secondaryNav{
float:right;
width:30%;
background-color:#FFFF99;
}
.color{ color:#FFFF00;}

The page I am working on can be found at:http://www.web-writer-articles.co.uk

It comes out blue and underlined!

thanks for your help

cass27

2

Guido, Ralph, reece and dresden_pheonix,

Thanks for this. Its appreciated. I understand specifity a bit more now and yes, it works now.

thanks

cass27

3

First off, it seams you use the ID #newlink more than once… that is bound to cause problems. if you need the same effect used more than once use a class instead “.newlink”.

To expand on recces’s post, and perhaps explain Raplh’s in a simpler manner. the issue is specificity.

The rule: #newlink a:link{}, targets the child element a of any element whose ID is “newlink”. but since you gave the ID of new link tho the anchor tag itself the the rule doesn’t apply, and thus it doesn’t underline like you wish. but when rece puts the id in the H3 tag it works because h3 is now newlink and the anchor is it’s child.

going back to ralphs answer, this would work also… and have the added advantage that if you moved the rule to another tag other than <a> it would still work:
#newlink:link{color:#FFFF00; text-decoration:none;}
#newlink:visited{text-decoration:none}
#newlink:hover{text-decoration:underline;}
This may be a moot point since you are applying the ID /CLASS specifically to to links which will always be anchor tags… but just something to consider.

HOWEVER, you should note an anchor <a> tag can not be around and <hx> ( or any other block element) Your HTML should look more like this and note I converted the ID into a class:

<h2 align=“center” style="color:#0066cc "><a class=“newlink” href=“ghost_writer.php”>Ghostwriter services</a></h2>

And your CSS:
a.newlink{display:block;}
a.newlink :link{color:#FFFF00; text-decoration:none;}
a.newlink :visited{text-decoration:none}
a.newlink :hover{text-decoration:underline;}

Hopes that helps

4

Are you sure you included that css file in your page?
Firebug only detects this for the link tag (style.css, line 70):

.maincontent {
color:#FFFFFF;
font-size:16px;
}

5

You need to change this in your css:

#newlink a:link{color:#FFFF00; text-decoration:none;}
#newlink a:visited{text-decoration:none}
#newlink a:hover{text-decoration:underline;}

to this:

a#newlink:link{color:#FFFF00; text-decoration:none;}
a#newlink:visited{text-decoration:none}
a#newlink:hover{text-decoration:underline;}

By the way, you should change this line in red

#content{
[COLOR="Red"]float:right;[/COLOR]
width:810px;
background-color:#339999;
}

to

#content{
[COLOR="Red"]float:left;[/COLOR]
width:810px;
background-color:#339999;
}

Otherwise, on wide screens, the content div sits way out to the right.

6

If you associate the #newlink id with the h3 tag, rather than with the a tag, it works:

<h3 id="newlink" align="center">
      Do you need...and <a href=
      "copywriter.php">Web content to get your web site seen.</a>
</h3>

But somebody else will have to explain why that is. :shifty:

Ned