Question

I’m having a problem in IE9: Whenever i hover over my top level wrapper div the first radio button acts like it’s being hovered over. So even if i have the last radio input pressed, if i click anywhere within the wrapper, the radio will go back to the first one. As soon as i hover my mouse off the wrapper div the light blue color on the first radio input changes back to gray as it should be.

My page works as expected in FF, Chrome and IE-Compatability mode.

I tried creating a simple page with inputs and can’t recreate the problem as it’s happening in my large web page.

Any input into what can be causing this and/or how to stop it would be greatly appreciated.

Edit#1: mycode:

<div id="wrapper">
...
<div id="region_sel_type">
    <input type="radio" id="optLine" name="radio_region_sel_type" value="Line" /><label id="lblForOptLine" for="optLine" title="Line" unselectable="on"></label>
    <input type="radio" id="optPoint" name="radio_region_sel_type" value="Point" /><label id="lblForOptPoint" for="optPoint" title="Point" unselectable="on"></label>
    <input type="radio" id="optPolygon" name="radio_region_sel_type" value="Polygon" /><label id="lblForOptPolygon" for="optPolygon" title="Polygon" unselectable="on"></label>
    <input type="radio" id="optList" name="radio_region_sel_type" value="List" /><label id="lblForOptList" for="optList" title="Input Coordinates" unselectable="on"></label>
    <input type="radio" id="optUploadKML" name="radio_region_sel_type" value="KML" /><label id="lblOptUploadKML" for="optUploadKML" title="Upload KML" unselectable="on"></label>
    <input type="radio" id="optOpen" name="radio_region_sel_type" value="Open" /><label id="lblForOptOptn" for="optOpen" title="Open Saved ROI" unselectable="on"></label>                   
</div> 
...
</div>

SOLUTION:
Somewhere inside the ‘wrapper’ div i had a self-closing label IE9 did not support (even though they should)

<label id='x'/>

Answer 1

What you are describing is the behavior of the label tag. Label tags act like a hover and click target for the input with the id specified in the label’s for attribute.

Either you have inadvertently applied a large label to one specific radio button, or maybe one of them is incorrectly closed, causing it to wrap the whole div.

Have you checked all of your label tags to make sure none are incorrectly closed?

---

Now that you’ve got your problem solved, I thought I’d add a note about self-closing tags in HTML 5 here.

XHTML started to tempt the world with XML strictness. Now that we are in an HTML 5 world, it’s easy to believe that’s still true. However, HTML 5 doesn’t know what /> is. Instead, it tries to automatically close some tags for you.

So in your case, it sounds like most browsers placed the implicit </label> at the expected place, but one browser placed it way out of context. Either way, it’s likely that none of them even cared about the />.

Remember our old friend the <p style="color:red;"><div>Why am I not red?</div></p>? HTML places the </p> before the <div> because block elements are not allowed inside <p> tags.

The best thing to do is just get out of the habit of using /> anywhere except elements that always have no content (link, br, img, etc. — and even then, you probably only want to do that for code readability, since in parsing, it makes absolutely no difference).

More info here: http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/