469,338 Members | 8,595 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,338 developers. It's quick & easy.

Remove link styles on images

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:

Expand|Select|Wrap|Line Numbers
  1. a:link {color: #0000ff;}
  2. a:visited:hover {color: #FFD; background-color: #0000ff;}
  3. 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
Sep 10 '07 #1
16 16480
Death Slaught
1,137 1GB
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:

Expand|Select|Wrap|Line Numbers
  1. a:link {color: #0000ff;}
  2. a:visited:hover {color: #FFD; background-color: #0000ff;}
  3. 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:

Expand|Select|Wrap|Line Numbers
  1. a#link
  2. {
  3. color: red;
  4. hover: black;
  5. background-color: black;
  6. }
Hope it helps, Death
Sep 10 '07 #2
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
Sep 11 '07 #3
Death Slaught
1,137 1GB
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
Sep 11 '07 #4
drhowarddrfine
7,435 Expert 4TB
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
}
Sep 11 '07 #5
Death Slaught
1,137 1GB
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
Sep 11 '07 #6
drhowarddrfine
7,435 Expert 4TB
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.
Sep 11 '07 #7
drhowarddrfine
7,435 Expert 4TB
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.
Sep 11 '07 #8
Death Slaught
1,137 1GB
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.
Sep 11 '07 #9
drhowarddrfine
7,435 Expert 4TB
If you want all images inside a link to not have the border:
a:link img{border:0}
a:hover img{border:0}
Sep 11 '07 #10
drhowarddrfine
7,435 Expert 4TB
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.
Sep 11 '07 #11
Death Slaught
1,137 1GB
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.myspacecdn.com/images01/33/s_38274e869726c70d26d6f87c2785e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacecdn.com/images01/33/s_38274e869726c70d26d6f87c2785e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacecdn.com/images01/33/s_38274e869726c70d26d6f87c2785e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacecdn.com/images01/33/s_38274e869726c70d26d6f87c2785e7d3" />
Meet David on Myspace
</a>
<a href="http://myspace.com" id="link6">
<img border="0" src="http://a148.ac-images.myspacecdn.com/images01/33/s_38274e869726c70d26d6f87c2785e7d3" />
Meet David on Myspace
</a>

<a href="http://images.google.com/images?hl=en&q=flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vKgBfyLa3EBATM:http://pinker.wjh.harvard.edu/photos/new_zealand_II/images/lotus%2520flower.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.com/images?hl=en&q=flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vKgBfyLa3EBATM:http://pinker.wjh.harvard.edu/photos/new_zealand_II/images/lotus%2520flower.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.com/images?hl=en&q=flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vKgBfyLa3EBATM:http://pinker.wjh.harvard.edu/photos/new_zealand_II/images/lotus%2520flower.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.com/images?hl=en&q=flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vKgBfyLa3EBATM:http://pinker.wjh.harvard.edu/photos/new_zealand_II/images/lotus%2520flower.jpg" />
Find flowers like this and many more on Google
</a>
<a href="http://images.google.com/images?hl=en&q=flower&gbv=2" id="link7">
<img border="0" src="http://tbn0.google.com/images?q=tbn:vKgBfyLa3EBATM:http://pinker.wjh.harvard.edu/photos/new_zealand_II/images/lotus%2520flower.jpg" />
Find flowers like this and many more on Google
</a>

<a href="http://autos.yahoo.com/;_ylc=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRy b3VnaARzbGsDc3Bpcml0LWZpeGVk" 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=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRy b3VnaARzbGsDc3Bpcml0LWZpeGVk" 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=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRy b3VnaARzbGsDc3Bpcml0LWZpeGVk" 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=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRy b3VnaARzbGsDc3Bpcml0LWZpeGVk" 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=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRy b3VnaARzbGsDc3Bpcml0LWZpeGVk" 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_DCSA107_20070911163952.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_DCSA107_20070911163952.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_DCSA107_20070911163952.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_DCSA107_20070911163952.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_DCSA107_20070911163952.jpg" />
Find the latest on George Bush with Ask.com
</a>

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

and heres the CSS:

Expand|Select|Wrap|Line Numbers
  1. a#link
  2. {
  3. color: #33000;
  4. hover: #330033;
  5. background-color: #330066;
  6. }
  7.  
  8. a#link2
  9. {
  10. color: #660000;
  11. hover: #660033;
  12. background-color: #660066;
  13. }
  14.  
  15. a#link3
  16. {
  17. color: #990000;
  18. hover: #990033;
  19. background: #990066;
  20. }
  21.  
  22. a#link4
  23. {
  24. color: #cc0000;
  25. hover: #cc0033;
  26. background-color: #cc0066;
  27. }
  28.  
  29. a#link5
  30. {
  31. color: #ff0000;
  32. hover: #ff0033;
  33. background-color: #ff0066;
  34. }
  35.  
  36. a#link6
  37. {
  38. color: #009900;
  39. hover: #009933;
  40. background-color: #009966;
  41. }
  42.  
  43. a#link7
  44. {
  45. color: #339900;
  46. hover: #339933;
  47. background-color: #339966;
  48. }
  49.  
  50. a#link8
  51. {
  52. color: #669900;
  53. hover: #669933;
  54. background-color: #669966;
  55. }
  56.  
  57. a#link9
  58. {
  59. color: #999900;
  60. hover: #999933;
  61. background-color: #999966;
  62. }
  63.  
  64. a#link10
  65. {
  66. color: #cccc00;
  67. hover: #cccc33;
  68. background-color: #000000;
  69. }
I realize that it's total chaos, but once again it works perfectly. So please inlightin me on what you ment.

Thanks, Death
Sep 11 '07 #12
drhowarddrfine
7,435 Expert 4TB
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...."
Sep 12 '07 #13
drhowarddrfine
7,435 Expert 4TB
Speak of the devil. .
Sep 12 '07 #14
Death Slaught
1,137 1GB
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
Sep 13 '07 #15
Death Slaught
1,137 1GB
Speak of the devil. .
lol you posted it twice and he ignored you.
Sep 13 '07 #16
brettl
41
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).
Sep 19 '07 #17

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

22 posts views Thread by Jonathan Snook | last post: by
7 posts views Thread by Greg Raven | last post: by
4 posts views Thread by Miguel Dias Moura | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.