Remove link styles on images

**Death Slaught** · Sep 10 '07, 08:19 PM

Originally posted by 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:

Code:

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

I would try giving your "<a>" tags for your non-image links an "id" like this:

Heres the HTML:

[HTML]<html>
<head>
<link rel="stylesheet " type="text/css"
href="location of the CSS document" />
</head>
<body>
<a href="where u want it to go" id="link">what you want it to say</a>
<a href="where u want it to go" id="link">what you want it to say</a>
<a href="where u want it to go">
<img border="0" src="location of image" />
</a>
</body>
</html>[/HTML]

and heres the CSS:

Code:

a#link
{
color: red;
hover: black;
background-color: black;
}

Hope it helps, Death

**beakersoft** · Sep 11 '07, 08:49 AM

Hi,

I think that should work, but it means i'll have to make sure i add that class to all my links. Is there nothing I can do that's global that just says if a image within a href tag, dont apply the styles

Cheers
Luke

**Death Slaught** · Sep 11 '07, 07:33 PM

Originally posted by beakersoft

Hi,

I think that should work, but it means i'll have to make sure i add that class to all my links. Is there nothing I can do that's global that just says if a image within a href tag, dont apply the styles

Cheers
Luke

hmm i'm not sure.....I'll look into it and see if there's another way but i don't think there is. Although adding id="" isnt going to kill you, your gona have to type alot anyways so a little bit more shouldnt hurt. I'll post back if i find anything.

- Death

**drhowarddrfine** · Sep 11 '07, 08:59 PM

I would try giving your "<a>" tags for your non-image links an "id" like this:

This is invalid. You cannot use an 'id' name more than once per page.

So if you want only one image to not have the blue outline, give it an id. If you have more than one that needs it removed, give them all a class name. Then, in the css:
#remove{
border:0
}

or, for a class
.remove{
border:0
}

**Death Slaught** · Sep 11 '07, 09:09 PM

Originally posted by drhowarddrfine

This is invalid. You cannot use an 'id' name more than once per page.
(more in a moment)

How interesting I'm very curious to how you would be able to do this other wise, and I've never herd anything of not being able to use an "id" name more than once. Also I tried it on 30 different links, it worked fine.

Thanks, Death

PS - I'm subscribing so you can teach me a lesson ~_^ lol

**drhowarddrfine** · Sep 11 '07, 09:12 PM

Originally posted by beakersoft

Is there nothing I can do that's global that just says if a image within a href tag, dont apply the styles

I missed this part. Yes there is but I need to finish something else.

**drhowarddrfine** · Sep 11 '07, 09:15 PM

Originally posted by Death Slaught

How interesting I'm very curious to how you would be able to do this other wise, and I've never herd anything of not being able to use an "id" name more than once. Also I tried it on 30 different links, it worked fine.

Thanks, Death

PS - I'm subscribing so you can teach me a lesson ~_^ lol

Read about the differences between a class and an id.

**Death Slaught** · Sep 11 '07, 09:27 PM

Originally posted by drhowarddrfine

Read about the differences between a class and an id.

Ok well thats all fine, but as you can see here the "class" attribute is only used for aligning things, and the "id" attribute is used for changing the color of one thing and not others, I understand how it is used to specify one thing, 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?

Thanks, Death

PS - I know this post is gona come back to haughnt me, but then again thats what I get for challenging The ever so wise drhowarddrfine.

**drhowarddrfine** · Sep 11 '07, 09:27 PM

If you want all images inside a link to not have the border:
a:link img{border:0}
a:hover img{border:0}

**drhowarddrfine** · Sep 11 '07, 09:31 PM

Originally posted by Death Slaught

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** · Sep 11 '07, 10:22 PM

Originally posted by drhowarddrfine

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:

Code:

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** · Sep 12 '07, 12:42 AM

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** · Sep 12 '07, 12:44 AM

Speak of the devil. .

**Death Slaught** · Sep 13 '07, 04:50 PM

Originally posted by 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...."

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

Remove link styles on images

Remove link styles on images

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment