Clickable label not working in IE 8

Question

I've got the following list item:

<li>     <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"         id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />     <label for="ctl00_mainContent_someRadioButton">         <img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" />     </label> </li> 

So what shows up is a radio button and an image next to it. When I am in FireFox, Chrome, and Safari clicking on that image fires the showSomeInfo() that's specified in the radio's onclick. I'm not sure why I guess because it's wrapped in a label and that label is relating to that radio button....

But anyway that's not my problem. I like that when you click the image, that javascript method showSomeInfo() is called. But the problem is that it works in all browsers except IE 8. If I open this page in IE 8, clicking on the image does nothing and I'm not sure why. I'm baffled at this one.

Answer 1

I was looking for an answer to this and wrote a quick dirty jquery handler for it:

$("label").click(function(){     if ($(this).attr("for") != "")         $("#" + $(this).attr("for")).click(); }); 

Answer 2

There's a slightly cleaner approach to change the markup that doesn't involve (ugly) CSS hacks or Javascript; change the <img> tag to a <span> tag with a background-image of the appropriate size. For example:

<li>   <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"          id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />   <label for="ctl00_mainContent_someRadioButton">     <span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" />   </label> </li> 

Replacing the width and height of your image appropriately.