Why wont this work? its driving me mad, im trying to have certain links be in different colours from my others...heres my head stuff

<STYLE TYPE="text/css">
<!--
body



img {border: 0px;}

body
{ background-color: #F5A0CD;
background-image:url(bg2.png);
font-family: tahoma;
font-size: 10PT;
color: #000000 ;}


A:link {text-decoration: none; color: #000000; cursor: crosshair;
background-color:#F5A0CC; }
A:visited {text-decoration: none; color: #000000; cursor: crosshair; background-color:#F5A0CC;}
A:active {text-decoration: underline; cursor: crosshair; color: #000000;}
A:hover {text-decoration: underline; color: #000000; cursor: crosshair; position:relative; left:1px; top:1px;}
A.foo : link {text-decoration: none; color: #000000; cursor: crosshair; }
A.foo : visited {text-decoration: none; color: #000000; cursor: crosshair;}
//-->
</STYLE>

and the links

<a href="http://sm5.sitemeter.com/stats.asp?site=sm5`````````" target="_top" class="foo"> <img alt="Site Meter" border=0 src="http://sm5.sitemeter.com/meter.asp?site=sm5`````````"> </a> <br /><script language="JavaScript" type="text/javascript" src="http://www.uqg-2000.com/server.php?service=online&id=starlet"></script>
<br/ ><a href="http://www.imood.com/query.cgi?email=starlet@``````````````" class="foo"><img src="http://www.imood.com/query.cgi?email=starlet@``````````````&type=1&fg=000000&trans=1" alt="I'm feeling...." border="0"></a>

I think the class belongs after....

a:link.foo{}

nope that hasnt helped either...i changed them to
A:link.foo {text-decoration: none; color: #000000; cursor: crosshair; }
A:visited.foo {text-decoration: none; color: #000000; cursor: crosshair;}

but to no avail :(

Oh, it might be the order.....


<STYLE TYPE="text/css">

A:link {text-decoration: none; color: #000000; cursor: crosshair; background-color:#F5A0CC; }
A:visited {text-decoration: none; color: #000000; cursor: crosshair; background-color:#F5A0CC;}

A:link.foo {text-decoration: none; color: #000000; cursor: crosshair; background-color:red;}
A:visited.foo {text-decoration: none; color: #000000; cursor: crosshair; background-color:red;}

A:active {text-decoration: underline; cursor: crosshair; color: #000000;}
A:hover {text-decoration: underline; color: #000000; cursor: crosshair;}

</STYLE>

No thats not got it either lol
I tried the way you posted and the way i had it orginally

A:link {text-decoration: none; color: #000000; cursor: crosshair; background-color:#F5A0CC; }
A:visited {text-decoration: none; color: #000000; cursor: crosshair; background-color:#F5A0CC;}
A.foo :link {text-decoration: none; color: #000000; cursor: crosshair; }
A.foo :visited {text-decoration: none; color: #000000; cursor: crosshair;}
A:active {text-decoration: underline; cursor: crosshair; color: #000000;}
A:hover {text-decoration: underline; color: #000000; cursor: crosshair; position:relative; left:1px; top:1px;}

Is there any kind of browser requirements for seeing class links or something? I uploaded a page here, perhaps it will work for other people? or something else in my code is messed up?

http://www.``````````````/classnoworky.html

Thanks for trying Alcy :)

Try
A:link.foo {text-decoration: none; color: #000000; cursor: crosshair; background: none;}
A:visited.foo {text-decoration: none; color: #000000; cursor: crosshair; background : none;}

Or

A:link.foo {text-decoration: none; color: #000000; cursor: crosshair; background-color: transparent;}
A:visited.foo {text-decoration: none; color: #000000; cursor: crosshair; background-color: transparent;}

epolady is on the right track.
the foo links are "inheriting" the background properties from the main link declarations.
to cancel the effect out of the foo links, you must declare a background color to the foo links too.
background-color:#ffffff;

(in your example page i think you are missing the ending head tag and have an extra body stated in the css area, but that didn't seem to affect the problem or solution anyways.)

Originally posted by epolady
Try
A:link.foo {text-decoration: none; color: #000000; cursor: crosshair; background: none;}
A:visited.foo {text-decoration: none; color: #000000; cursor: crosshair; background : none;}


That one got it! thank you very much :)

pb&j...thanks, i'll check all my codeing...i know its sloppy at the moment anyway :)

I know you allready solved your problem but i always use this way:

.foo A:link { stuff in here }
.foo A:hover { stuff in here }

that works too :) Just thought of letting you know that

Love,
Mirna