How to apply style to text link but not image link

[scottspinola]

I have a style sheet for my blog and I'm playing around with it to learn CSS as I'm fairly new to it.Here are my two questions:1- What would a style designation a img do?2- How do I apply a background-color (on hover) to text that is a link but not to an image that is a link?I have the following styles set for links:

a:link {  color:#CC5500;  text-decoration:none;  }a:visited {  color:#CC5500;  text-decoration:none;  }a:hover {  color:#CC5500;  text-decoration:none;  background-color:#FFCC66;  }a img {  border-width:0;  }

The hover color is working fine for text links but I can't figure out how to get linked images to not show the background-color. I tried adding a background-color matching the background-color of the page to the a img style but that didn't work. I'm not exactly sure what the a img style does actually.The web site is here (absolutely PG!): http://www.myatx.net/The style sheet is here: http://www.scottspinola.com/style.cssIt was originally (if I remember correctly) a standard Blogger template but I might have found it online somewhere. As such, it's a lot more complicated than my knowledge can parse. I'm trying to customize it as I learn more about CSS.Any help would be appreciated!

[justsomeguy]

You would want to add another rule.

a img:hover { border-width:0; background: none; }

[scottspinola]

You would want to add another rule.

a img:hover { border-width:0; background: none; }

<{POST_SNAPBACK}>

Thanks for the suggestion. I added this to my style sheet but it doesn't seem to work. :)I added it in various places in the style sheet and mixed it up in various ways to no avail (e.g a img:hover; a:hover img; background:none; background-color:none; background:#FFFFFF; background-color:#FFFFFF).Any additional thoughts anyone? Did I employ the above suggestion incorrectly?

[Jack McKalling]

You could just stick to what you had in the beginning, but add the text color itself next to the backgroundcolor.

a:link { color:#CC5500; text-decoration:none; }a:visited { color:#CC5500; text-decoration:none; }a:hover { color:#CC5500; text-decoration:none; background-color:#FFCC66; }a img { border-width:0; background:none; color: #000000; }

Because for some reason the background doesn't always work without the text color, I can't be sure that is the case right now though. But sure try it out

[aspnetguy]

I am almost positive that is not true. The reason W3C recommends placing color and background together and not just using one or the other is because some browsers don't inherit background or color properly sometimes.They will still work if you use just color or just background but may have quirky behavior in some cases.

[scottspinola]

Still not working unfortunately. To control the variables, I created a bare bones local test page and a style sheet with only the link styles. I get the same result. The entire style sheet for this test is:

a:link {  color:#CC5500;  text-decoration:none;  }a:visited {  color:#CC5500;  text-decoration:none;  }a:hover {  color:#CC5500;  text-decoration:none;  background-color:#FFCC66;  }a img {  border-width:0;  color:none;  background-color:none;  }a img:hover {  border-width:0;  color:none;  background-color:none;  }

This thing is bugging me out. It shouldn't be this difficult, should it?

[Jack McKalling]

You can't not specify a text color, so try this:

a:link { color:#CC5500; text-decoration:none; }a:visited { color:#CC5500; text-decoration:none; }a:hover { color:#CC5500; text-decoration:none; background-color:#FFCC66; }a img { border-width:0; color:#000000; background-color:transparent; }a img:hover { border-width:0; color:#000000; background-color:transparent; }

Even though an image doesn't have text to be coloured Edited June 7, 2006 by Dan The Prof

[scottspinola]

No dice. I created a test style sheet with your code and only your code and I get the same result. Same with my online style sheet.

You can't not specify a text color, so try this:Even though an image doesn't have text to be coloured

<{POST_SNAPBACK}>

[Jack McKalling]

I have tested it too, and using transparent was a bad idea of mine You should actually redefine the same background color of what is laying underneath. eg. replace transparent by #ffffff

a:link {color:#CC5500;text-decoration:none;}a:visited {color:#CC5500;text-decoration:none;}a:hover {color:#CC5500;text-decoration:none;background-color:#FFCC66;}a img {border-width:0;color:#000000;background-color:#FFFFFF;}a img:hover {border-width:0;color:#000000;background-color:#FFFFFF;}

Edited June 13, 2006 by Dan The Prof

[scottspinola]

My original postings were a long time ago, but I got frustrated that all the previous attempts to fix the issue failed. I recently redesigned the web site, this time making a conscious attempt to make it using valid XHTML and CSS. When I ran into the same hover problem with my linked images I started my search again for a solution, and stumbled onto a solution for a different problem that I thought might address mine. The solution was to add a class to the anchor tags and set the background-color values to the same value as the page background.Here it is in action: www.scottspinola.com. It's a simple little site but I like it. This solution is valid CSS but it still feels like a hack to me, since the hover effect is still there; you just can't see it because it's the same as the background.It would be great if the CSS standard could address this directly by providing some way to "zero out" all styles on linked images, something like link-decoration:none or whatever.Anyway, that's my story and I'm sticking to it!

[jesh]

Without reading this thread in depth, I believe there's a compatibility problem here:

a img:hover {border-width:0;color:#000000;background-color:#FFFFFF;}

I think this would work better across browsers (read IE 6) if it were:

a:hover img {border-width:0;color:#000000;background-color:#FFFFFF;}

[scottspinola]

I think this would work better across browsers (read IE 6) if it were:

a:hover img {border-width:0;color:#000000;background-color:#FFFFFF;}

Thanks for the tip! That worked! I had solved it by creating a new class, but I like this better. I still think of this as a hack since it doesn't really get rid of the hover effect; it just makes the hover the same color so you don't see it.Perhaps CSS 3 will provide a way to "zero out" all styles on linked images, something like link-decoration:none or whatever.Oh well. Thanks again!