IE6 / IE7 jQuery Fix: Anchor Image Clickable Area
September 25th, 2009
3 comments
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:
<a href="rss-icon.png"> <span style="display:block; width:100px; height:100px;"> <img src="someImage.png" /> </span> </a>
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(); });