IE6 / IE7 jQuery Fix: Anchor Image Clickable Area

Michael Hartmayer — Fri, 25 Sep 2009 18:45:31 +0000

IE6 and IE7 both experience a problem in which images inside of block elements inside of anchors lose their click ability. Here’s an example:

 href="rss-icon.png">
	 style="display:block; width:100px; height:100px;">
		 src="someImage.png" />
	>
>

Every area of the link remains click-able except for the surface consumed by someImage.png. (Note, this problem will not show in IE8, or FF)

Here’s a very small jQuery plugin I wrote to fix this particular issue.

(function($){
	$.fn.fixClick = function() {
		return this.each(function(){
			$(this)
				.css({cursor:'pointer'})
				.click(function(){
					window.location.href = $(this).attr('href'); 
				});
		});
	}
})(jQuery);

Simply select your target element(s) and use this plugin to make the entire anchor click-able again. Here’s an example:

$(document).ready(function(){
   $('a').fixClick();
});

Share and Enjoy:

Michael Hartmayer - Portfolio » ie6

IE6 / IE7 jQuery Fix: Anchor Image Clickable Area