Why does IE8 add bottom border on my image anchor tag?

Question

I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.

First off, here's the website: www.mchenry.edu View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with

#banner p#img a:hover {text-decoration: none};

But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.

Thanks for any insight you guys may have.

Answer 1

try this:

#img a:hover {text-decoration: none!important;}

Answer 2

Okay, let's see. This is where the developer tools come in handy.

Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.

Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.

However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!

So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".

Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).

Answer 3

Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

or by adding this line to .htaccess:

Header set X-UA-Compatible IE=EmulateIE7

to force IE8 into IE7 compatibility mode.

Answer 4

I have just encountered this same bug under IE8 (version 8.0.6001.18702).

I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.

Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:

<a href="test.html" class="imagelink"><img src="test.gif" alt="test"/></a>

Then you can use the CSS:

a.imagelink:hover { background-color: transparent; }

This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.

Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).

I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.