How can I fix this strange IE 8 img anchor hover behaviour?

Question

If I add this to my CSS...

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

This happens to all images that are also links when viewing in IE 8 (fine in firefox)...

They look right...

http://notails.com/nothover.jpg

until I hover over them...

http://notails.com/hover.jpg

If I remove the line of CSS the behaviour goes away. I've tried googling this but I just get unrelated problems.

Answer 1

try

a {
    margin:  0px;
    padding: 0px;
}

Answer 2

You might also try setting line-height on that item to 0.

Answer 3

By default, images align their bottom edges with the baseline of the text. That grey space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for descenders is still reserved.)

You can get rid of it like this:

a img {  /* You might want to make this rule more specific! */
    vertical-align: bottom;
}

See That mysterious gap under images for a full discussion of this.

Answer 4

I think you probably need to set the border for the image to none, so border:none;