Clickable label not working in IE 8

Question

I\'ve got the following list item:

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

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 3

I've also discovered that if you have a hidden input with display:none or visibility:hidden and are relying on the label for selection it will not work in ie8.

My workaround was to have an overflow:hidden on the containing element and position the input outside of this area.

Answer 4

Are you sure you aren't simply looking at a typo? Check "ctl00_mainContent_someRadioButton" vs. "ctl00_mainContent_somelRadioButton"

Answer 5

I Guess I have a better hack solution for this problem. I will explain why for first.

Using jquery to hit the label click works, but not when you are using an Input File, because you will receive access denied.

Using css and display the image as a background it´s not good too because you need to have an image with the exactly size, which is not the case when the user uploads the Image or you have a lot of images with different sizes.

Ok now I´ll explain the idea of the hack:

You have a Label with an image inside, when you click the image, IE8 doesn´t fire the Label. But if you write some text into the Label, when you click the text IE8 fire the label.

The Idea is to put a span inside the label, with the size of the label (width and height)

Ok but if you don´t have text inside it won´t work, but if you change the background color it will work.

So what you need to do is:

1. Place a Span with the role size of the Label
2. Write a background color and make it transparent
3. Position the Span using relative position to put the Span exactly over the Label.

It´s a little hard to do it, but I guess it will cover many more situations. An example of a Label firing the Input type File:

<label for="" id="lblInput" style="cursor: pointer; z-index:3;">
    <img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" />
    <span style="position:relative;
        top:-180px;display:block;height:180px;width:280px;
        z-index:1;background-color:Aqua;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
        background: rgba(255, 255, 255, 0.0);" >
    </span>
</label>

I hope it works and save you Like it saved-me

Answer 6

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.