IE7 hyperlinked graphic problem

[UserFriendly]

Well, downloaded the 'final' release of IE7, and I've found a page that doesn't render correctly. Knew it was too good to be true.

The problem is a set of hyperlinked images. The top 10% of the image acts as a hyperlink (cursor becomes pointing finger, clicking causes new page to load). But the lower 90% of the image does not act as a hyperlink.

Given that the code couldn't be much simpler:

<a ...><img ...></a>

has anyone got any idea why IE7 would have this trouble when this page has always worked in IE6, Opera and Firefox?

[tedster]

Well, there must be something else in the code, right? Is the layout all done with divs, or is it table-based?

[icantthinkofone]

Does the image tag have the closing tag, too?

[UserFriendly]

Yes, it's all well-formed and valid.

I think the problem is caused by the style of the a element. It's set to float: left and while this lays things out properly, IE7 is choking on it where no other browser does. Removing that style ruins the layout of the page, but it does mean that the whole graphic acts like a hyperlink again.

No idea why it's doing that, but I'm trying to find a way to get it to layout properly without making IE7 burst into a tantrum. Man, I hate Internet Explorer.

[UserFriendly]

Even if I put the a element inside a div, and make the div float left instead, still only a part of the image reacts as a hyperlink.

Even if I remove styles from the containing div, or the image, or remove the title attribute from the image, still it doesn't fully react as a hyperlink. This is going to bug me.

[UserFriendly]

Actually, it's caused by the div that comes after the float containing a line set to italic style.

Exactly at the same vertical height as the p element that is formatted with style

font-style: italic;

the graphic float on the left stops behaving as a hyperlink.

This must be a bug in IE7, surely?

[edited by: UserFriendly at 7:32 pm (utc) on Oct. 21, 2006]

[tedster]

I think the problem is caused by the style of the a element. It's set to float: left

Have you tried applying a float style to the image, rather than the anchor element?

[UserFriendly]

Thanks for the suggestion, tedster, but that doesn't fix it. I'm pretty sure it's just a sign that IE7 isn't going to save the day as far as cross-browser standards go. I've found another page that renders fine in every main browser except IE7.

So once again it's the old game of messing around to please Internet Explorer's broken engine. I hate that game.