This is a general problem with CSS that I have with basically every site I own. Whenever I place an image that is hyperlinked, it inherits the regular link "a:hover" style. So, if I set regular links to be highlighted in black or underlined, then all of the hyperlinked images will also have that style when hovered over. It's so frustrating and I've seemingly tried everything to get it to stop doing this, but nothing works. On top of that, sometimes the images move upward a few pixels when hovered over. Worse yet, they REALLY look bad in IE - the entire image turns black, which is the hover value of the regular hyperlinks I use. I'd greatly appreciate it if anyone knows how I can stop it from doing this!!! For instance, this is what I tried: a.imglink:link img, a.imglink:visited img { border: none; } a.imglink:hover img { border: none; } a.imglink:active img { border: none; } Code (markup): <img src="http://www.mysite.com/images/image.gif" class="imglink" border="0"></a> Code (markup): yet, images still display a border when hovered :/ I must have edited this code a million times, trying so many different things, and nothing even shows a result on the live site. There are no other image/link declarations in the stylesheet.
i just use like this, and works for me always: .imglink a { border: none; margin:0; border:0; } .imglink a:hover { border: none; margin:0; border:0; } <img class="imglink" src="http://www.mysite.com/images/image.gif" alt="describe image"></a>
a.imglink:hover img {border: none;} Yea, pretty sure that ^ isn't valid. Try: .imglink a:link, .imglink a:visited, .imglink a:hover, .imglink a:active {border:0;} or .imglink a:link {border:0;} .imglink a:visited {border:0;} .imglink a:hover {border:0;} .imglink a:active {border:0;} A good thing to remember is that the link-state (a:link) must stay intact.
Now now, no fighting. Border: 0 is truly just a shorter way of saying border: none. Border happens to be one of those properties that accepts both. There are others that you cannot use "none" on like background-color (you must use "transparent" for that one). I dunno what else you're using the class of imglink for, but if it's only for link properties you don't need it. We all have images in links that we don't want showing up in our images. It's a common problem. <a href="foo"><img src="mars.gif"></a> This is actually all the html you need. a { border: none; (or 0, whichever floats your boat) text-decoration: none; } a:hover { some awesome hover stuff here; } a img { refute the awesome hover stuff here; } (if the above isnt' enough, you can also add this:) a:hover img { refute the awesome hover stuff here; } Code (markup): But usually we can ignore :hover with images because unless there's a border showing up, the text colour should not affect the image in any way. At all. If the above doesn't do the trick, you'll need to post your whole CSS (and maybe HTML if you have any inline styles, cause they'll override any external CSS sheet), because the above works unless something else is overriding it (which is always possible in CSS).
Do we SEE a problem here - you have the class on the image - NOT the anchor. As such a.imglink is targeting nothing. In that case you'd want "a .imglink" - pay attention to the space between them... though as others have said, "a img { border:0; }" should be all you need - though I so rarely ever want borders around images I kill them on ALL images. Uhm, that's backwards, the anchor is around the image, not the other way around. Oh and SP, yours is wrong too - the border:0; declaration should be in "a img", not "a".