<input / "> inside <label> does not work in Firefox

Question

my current markup is as follows:

<li class="multi_answer"> <label for="checkbox2"> <div class="multi_answer_box"> <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" /> </div> <div class="multi_answer_text">Checkbox Label</div> </label> </li> 

works great in everything BUT firefox.

after checking the markup, he reads it like ...

 <li class="multi_answer"> <label for="checkbox1"> </label> <div class="multi_answer_box"> <input id="checkbox1" class="multi_box" type="checkbox" name="checkbox1"> </div> <div class="multi_answer_text"> Increased counseling staff </div> </li> 

ideas why FF will interpret it this way?

I also use this css

 .multi_answer label:hover { background:#DDD; } .multi_answer_box input { padding-left:5px; padding-right:5px; float:left; height:48px; width:48px; } .multi_answer label { overflow: auto; cursor:pointer; width:auto; margin:10px; padding: 10px; -moz-border-radius: 7px; border-radius: 7px; background:#CCC; display:block; } 

http://jsfiddle.net/NhD3r/1/ <---- working example

Answer 1

Probably because the label should only contain inline elements , and not block elements such as div .

Decision

replacing all div with span saved supposed style and function, observing the above rule.

 <li class="multi_answer"> <label for="checkbox2"> <span class="multi_answer_box"> <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" /> </span> <span class="multi_answer_text">Checkbox Label</span> </label> </li> 

Answer 2

I cannot replicate your problem, I use FF6, anyway, you should try to check your HTML code and see if there is anything that can make FF behave the way it does. Also try clearing the cache (you'll never know ...)

Answer 3

You can reorganize the HTML structure to be valid, and follow the specification and still get the effect you need.

 <li class="multi_answer"> <div class="multi_answer_box"> <input type="checkbox" id="checkbox3" name="checkbox3" class="multi_box" /> <label for="checkbox3">Did some additional important stuff and things, with a description that long enough to wrap</label> </div> </li> 

See the updated script.

I made these changes and tested Firefox 3.6.12 on Linux.