Skip to main content

Image links in IE8

While mocking up a design page for a colleague's website I came across a new browser behaviour in IE8.

This was the first time I used IE8 as my main development browser, due to the fact that the PC was re-installed and high-priority updates were applied. Surprisingly Microsoft branded IE8 as a priority update.

Anyway, back to what I was talking about, here's a sample:
<a href="index.htm"><img src="logo2.jpg" alt="Logo" title="Logo" /></a>


As you can tell, this is using an image for a link, where it behaves well in Chrome, Firefox and in the previous versions of IE (7 and older). But in IE8, this is not the case as the DOM does not treat the image as innerText, only as a child node. As a result, everytime I hover the mouse over this image, an extra gap would come from nowhere shifting any relatively positioned elements.

To fix this I explicitly added a space (&nbsp;), so the line would look like:
<a href="index.htm"><img src="logo2.jpg" alt="Logo" title="Logo" />&nbsp;</a>

Comments

Anonymous said…
J'ai le même probleme car mes liens sur images sont inactifs sous IE8. Cependant ta solution de rajouter l'espace ne résoud pas mon pb. Seul un rafraichissement de la page rend le lien à nouveau actif.
Est-ce que qq a une idée pour rendre le lien actif des la première apparition de la page (sans rafraichissement)?
Merci d'avance.
Anonymous said…
I have the same issue but your proposition to add a blank do not solve my issue. Only a refresh of the webpage make the link active. Does anyone has another solution?
Shahid Ali Shah said…
Please show the HTML code where the problem is happening. I'll be more than welcome to lend assistance

Popular posts from this blog

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money. Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour. I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase...

Download free software and help the poor

Yes, you heard me. To celebrate this festive season, SoftMaker has made their excellent alternative to Microsoft Office freely available. On top of this they will donate to charity with every download. With such a commendable act, why not contribute towards a good cause and try out an Office alternative. So head over to Load and Help ( http://www.loadandhelp.de/home-en.html ).

Microsoft Bing

It's nice to see the Press taking a much more keen interest in technology and gadgets. So I wasn't that much surprised when the Metro covered the launch of Microsoft Bling. Currently in beta Microsoft is obviously renewing their competition against Google. I've also noticed that Microsoft has recently replaced the Live search with Bing on their MSN page. But after using it, why do I get the impression that it's just copying Google with a more colourful interface?