Remove link styles on images

[beakersoft]

Hi,

I've only just started playing about with CSS so there might be a really obvious answer to this.

In my style sheet i have the following to style the hyperlinks on the page:

a:link {color: #0000ff;}
a:visited:hover {color: #FFD; background-color: #0000ff;}
a:link:hover {color: #FFD; background-color: #0000ff;}

Only problem is, any images on the page that are also link get the hover style applied to them, so they get an ugly blue border around them when you hover over them. How can i stop this happening?

Cheers
Luke

[drhowarddrfine]

but if it works by giving each link an "id" that the images don't have, therefor only changing the colors of the "text" links then where is the problem?

If it works this time then there is no problem, but if he tries to use that element for anything else, such as those listed in the spec, there will be a problem. It messes up the document tree for the browser. Kind of like you can have a math problem that has an error in it but still gives you the right answer, until you try inserting different values into the equation.

[Death Slaught]

If it works this time then there is no problem, but if he tries to use that element for anything else, such as those listed in the spec, there will be a problem. It messes up the document tree for the browser. Kind of like you can have a math problem that has an error in it but still gives you the right answer, until you try inserting different values into the equation.

ok I'm not really sure what you meen, but I think your saying that having an "id" for the links only are fine, but by adding the "id" attribute with a different value that it will create a problem. I don't think it's what you ment but I tried it anyways. Here are the results:


I took 5 links wich all led to a different web site i gave them each a different "id" and different values in the CSS, it worked perfectly.

So then I added 5 image links all with different "id's" and different values once again it worked perfectly.

After that I had my doubts that I understood what you were saying so I took all 10 links the 5 "text" links and the 5 "image" links and made 5 of each one.
So that gave me this:

[HTML]<a href="http://hotmail.com" id="link">Go to Hotmail</a>
<a href="http://hotmail.com" id="link">Go to Hotmail</a>
<a href="http://hotmail.com" id="link">Go to Hotmail</a>
<a href="http://hotmail.com" id="link">Go to Hotmail</a>
<a href="http://hotmail.com" id="link">Go to Hotmail</a>

<a href="http://thescripts.com" id="link2">Go to Thescripts</a>
<a href="http://thescripts.com" id="link2">Go to Thescripts</a>
<a href="http://thescripts.com" id="link2">Go to Thescripts</a>
<a href="http://thescripts.com" id="link2">Go to Thescripts</a>
<a href="http://thescripts.com" id="link2">Go to Thescripts</a>

<a href="http://yahoo.com" id="link3">Go to Yahoo</a>
<a href="http://yahoo.com" id="link3">Go to Yahoo</a>
<a href="http://yahoo.com" id="link3">Go to Yahoo</a>
<a href="http://yahoo.com" id="link3">Go to Yahoo</a>
<a href="http://yahoo.com" id="link3">Go to Yahoo</a>

<a href="http://google.com" id="link4">Go to Google</a>
<a href="http://google.com" id="link4">Go to Google</a>
<a href="http://google.com" id="link4">Go to Google</a>
<a href="http://google.com" id="link4">Go to Google</a>
<a href="http://google.com" id="link4">Go to Google</a>

<a href="http://ask.com" id="link5">Go to Ask</a>
<a href="http://ask.com" id="link5">Go to Ask</a>
<a href="http://ask.com" id="link5">Go to Ask</a>
<a href="http://ask.com" id="link5">Go to Ask</a>
<a href="http://ask.com" id="link5">Go to Ask</a>

<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacec dn.com/images01/33/s_38274e869726c 70d26d6f87c2785 e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacec dn.com/images01/33/s_38274e869726c 70d26d6f87c2785 e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacec dn.com/images01/33/s_38274e869726c 70d26d6f87c2785 e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacec dn.com/images01/33/s_38274e869726c 70d26d6f87c2785 e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacec dn.com/images01/33/s_38274e869726c 70d26d6f87c2785 e7d3" />
Meet David on Myspace
</a>

<a href="http://images.google.c om/images?hl=en&q= flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vK gBfyLa3EBATM:ht tp://pinker.wjh.harv ard.edu/photos/new_zealand_II/images/lotus%2520flowe r.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.c om/images?hl=en&q= flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vK gBfyLa3EBATM:ht tp://pinker.wjh.harv ard.edu/photos/new_zealand_II/images/lotus%2520flowe r.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.c om/images?hl=en&q= flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vK gBfyLa3EBATM:ht tp://pinker.wjh.harv ard.edu/photos/new_zealand_II/images/lotus%2520flowe r.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.c om/images?hl=en&q= flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vK gBfyLa3EBATM:ht tp://pinker.wjh.harv ard.edu/photos/new_zealand_II/images/lotus%2520flowe r.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.c om/images?hl=en&q= flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vK gBfyLa3EBATM:ht tp://pinker.wjh.harv ard.edu/photos/new_zealand_II/images/lotus%2520flowe r.jpg" />
Find flowers like this and many more on Google
</a>

<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5M GRqZDdoBF9TAzI3 MTYxNDkEc2VjA2Z wLXRyb3VnaARzbG sDc3Bpcml0LWZpe GVk" id="link8">
<img border="0" src="http://ads.yimg.com/us.yimg.com/a/fo/ford/fusion-180x100.jpg" />
Find cars on Yahoo
</a>
<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5M GRqZDdoBF9TAzI3 MTYxNDkEc2VjA2Z wLXRyb3VnaARzbG sDc3Bpcml0LWZpe GVk" id="link8">
<img border="0" src="http://ads.yimg.com/us.yimg.com/a/fo/ford/fusion-180x100.jpg" />
Find cars on Yahoo
</a>
<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5M GRqZDdoBF9TAzI3 MTYxNDkEc2VjA2Z wLXRyb3VnaARzbG sDc3Bpcml0LWZpe GVk" id="link8">
<img border="0" src="http://ads.yimg.com/us.yimg.com/a/fo/ford/fusion-180x100.jpg" />
Find cars on Yahoo
</a>
<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5M GRqZDdoBF9TAzI3 MTYxNDkEc2VjA2Z wLXRyb3VnaARzbG sDc3Bpcml0LWZpe GVk" id="link8">
<img border="0" src="http://ads.yimg.com/us.yimg.com/a/fo/ford/fusion-180x100.jpg" />
Find cars on Yahoo
</a>
<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5M GRqZDdoBF9TAzI3 MTYxNDkEc2VjA2Z wLXRyb3VnaARzbG sDc3Bpcml0LWZpe GVk" id="link8">
<img border="0" src="http://ads.yimg.com/us.yimg.com/a/fo/ford/fusion-180x100.jpg" />
Find cars on Yahoo
</a>

<a href="http://news.ask.com/news?qsrc=&o=0& l=dir" id="link9">
<img border="0" src="http://ak.imgfarm.com/images/ap/gallery/Bush.sff_DCSA10 7_2007091116395 2.jpg" />
Find the latest on George Bush with Ask.com
</a>
<a href="http://news.ask.com/news?qsrc=&o=0& l=dir" id="link9">
<img border="0" src="http://ak.imgfarm.com/images/ap/gallery/Bush.sff_DCSA10 7_2007091116395 2.jpg" />
Find the latest on George Bush with Ask.com
</a>
<a href="http://news.ask.com/news?qsrc=&o=0& l=dir" id="link9">
<img border="0" src="http://ak.imgfarm.com/images/ap/gallery/Bush.sff_DCSA10 7_2007091116395 2.jpg" />
Find the latest on George Bush with Ask.com
</a>
<a href="http://news.ask.com/news?qsrc=&o=0& l=dir" id="link9">
<img border="0" src="http://ak.imgfarm.com/images/ap/gallery/Bush.sff_DCSA10 7_2007091116395 2.jpg" />
Find the latest on George Bush with Ask.com
</a>
<a href="http://news.ask.com/news?qsrc=&o=0& l=dir" id="link9">
<img border="0" src="http://ak.imgfarm.com/images/ap/gallery/Bush.sff_DCSA10 7_2007091116395 2.jpg" />
Find the latest on George Bush with Ask.com
</a>

<a href="http://www.thescripts. com/forum/member.php?u=37 720" id="link10">
<img border="0" src="http://www.thescripts. com/forum/customavatars/avatar37720_2.g if" />
Find out about drhowarddrfine at Thescripts.com
</a>
<a href="http://www.thescripts. com/forum/member.php?u=37 720" id="link10">
<img border="0" src="http://www.thescripts. com/forum/customavatars/avatar37720_2.g if" />
Find out about drhowarddrfine at Thescripts.com
</a>
<a href="http://www.thescripts. com/forum/member.php?u=37 720" id="link10">
<img border="0" src="http://www.thescripts. com/forum/customavatars/avatar37720_2.g if" />
Find out about drhowarddrfine at Thescripts.com
</a>
<a href="http://www.thescripts. com/forum/member.php?u=37 720" id="link10">
<img border="0" src="http://www.thescripts. com/forum/customavatars/avatar37720_2.g if" />
Find out about drhowarddrfine at Thescripts.com
</a>
<a href="http://www.thescripts. com/forum/member.php?u=37 720" id="link10">
<img border="0" src="http://www.thescripts. com/forum/customavatars/avatar37720_2.g if" />
Find out about drhowarddrfine at Thescripts.com
</a>[/HTML]

and heres the CSS:

a#link
{
color: #33000;
hover: #330033;
background-color: #330066;
}
 
a#link2
{
color: #660000;
hover: #660033;
background-color: #660066;
}
 
a#link3
{
color: #990000;
hover: #990033;
background: #990066;
}
 
a#link4
{
color: #cc0000;
hover: #cc0033;
background-color: #cc0066;
}
 
a#link5
{
color: #ff0000;
hover: #ff0033;
background-color: #ff0066;
}
 
a#link6
{
color: #009900;
hover: #009933;
background-color: #009966;
}
 
a#link7
{
color: #339900;
hover: #339933;
background-color: #339966;
}
 
a#link8
{
color: #669900;
hover: #669933;
background-color: #669966;
}
 
a#link9
{
color: #999900;
hover: #999933;
background-color: #999966;
}
 
a#link10
{
color: #cccc00;
hover: #cccc33;
background-color: #000000;
}

I realize that it's total chaos, but once again it works perfectly. So please inlightin me on what you ment.

Thanks, Death

[drhowarddrfine]

You have to separate what you can get to work from what other problems you may cause or have later on. I know 'id' will work that way but you are forgetting the side affects should you want to do something with, say, javascript.

For example, if you tried to use getElementById( ), but had multiple id names, the function would not know what to return because it can only return one element with one unique name.

So your example becomes "yes, it works, but...."

[drhowarddrfine]

Speak of the devil. .

[Death Slaught]

You have to separate what you can get to work from what other problems you may cause or have later on. I know 'id' will work that way but you are forgetting the side affects should you want to do something with, say, javascript.

For example, if you tried to use getElementById( ), but had multiple id names, the function would not know what to return because it can only return one element with one unique name.

So your example becomes "yes, it works, but...."

I think i understand what your saying now, but just because i'm having so much fun with the (i know you are 2) ima try and get it to work in javascript, in other words get it to call about 3 different "id"s THIS IS SO GONA BLOW UP IN MY FACE, AND I CAN'T WAIT!!!!!!!

- Death

[Death Slaught]

Speak of the devil. .

lol you posted it twice and he ignored you.

[brettl]

It's not valid HTML.

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).