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

The reason it works the way it does in Firefox et al is that that's what <label> is supposed to do when it's got a "for" attribute that points to an input field (by "id" value). If it doesn't work that way in IE, it's because Microsoft either interpreted the standard differently or simply failed to implement it correctly. (I don't see any clear language in the w3c reference I found to stipulate whether anything but text content of a label should get focus and transfer it.)

Answer 2

It looks like IE doesn't properly handle labels with img elements in them. The only reasonable ways I have been able to find for dealing with this problem are either using HTML component behaviors, Javascript handlers, or CSS hacks. I haven't tried all of these so I can't guarantee that they will work.

Answer 3

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();
});