Some CSS help. IE (8) strange behaviour.

I have some CSS designed to cause a link’s background to go grey when it’s hovered over…

small a:hover, a:hover {background-color: #CCC;}

In Firefox it works fine.
In IE it works fine for text links. But for Image links it does something strange. It causes a grey box to appear behind, at the bottom, and slightly to the left of the image. Look at in IE 8 to see what I mean. (Compare with same in Firefox, if you have it)

So my question is, how do I stop image links from inheriting the behaviour of text links?

(I want to ‘undo’ the hover behaviour for image links)

Assign specific CSS to links vs images.

Also, be aware of CSS LoVe/HAte" Linking.

If I assign CSS to a link, it applies the same CSS to a linked image. I don’t know how to NOT do that.

How do I assign specific CSS to an image that would override the link CSS and stop the strange behaviour?

I got the answer. Adding the following to ‘a img’ CSS fixed it…

“vertical-align: bottom;”

I think Duckster means to assign CSS to images/text separately, via the “class” attribute. You could designate a class value of “textLink” for any text hyperlinks to which you want to apply the CSS. Then, you would modify the CSS style as “a.textLink:hover”.

For example:


a.textLink:hover {background-color: #CCC;}


<a href="http://MyWebsite" class="textLink">Some text</a>
<a href="http://SomeOtherWebsite"><img src="http://MyWebsite/an_image.jpg" /></a>

Thanks for that. But I’d rather not have to create a class for it, because I want the hover behaviour for ALL the links on my website, so I don’t want to have to put class=“textlink” in every single one of them.

Then reverse the logic. Apply a style that applies to all links that should have the same hover. Then create a special class for those that require something else.