Some CSS help. IE (8) strange behaviour.

Factual Questions
1

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 http://notails.com 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)

2

Assign specific CSS to links vs images.

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

3

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?

4

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

“vertical-align: bottom;”

5

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:

CSS



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

HTML



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

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.

7

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.