<input/> inside <label> not working in Firefox

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 inspecting the markup, it's reading it as...

<li class="multi_answer">
    <la开发者_JS百科bel 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 would be interpreting it this way?

I also am using 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

---

Probably because label must contain inline elements only, and not block elements like div.

SOLUTION

replacing all div's with span's retained intended styling and function while complying with above stated 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>

---

I can't replicate your problem, I'm using FF6, anyway, you should try to validate your HTML and see if there's anything that may cause FF to behave the way it does. Also try clearing you cache (you can never know...)

---

You can reorganize the HTML structure to be valid and follow the spec and still get the effect you want.

<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's long enough to wrap</label>
    </div>
</li>

See the updated fiddle.

I made these changes and tested using Firefox 3.6.12 on Linux.