CODEWITHSUNDEEP
htmlcsscross-browserforms
jondavidjohn
jondavidjohn

Reputation: 62392

<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">
    <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 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

Upvotes: 4

Views: 5369

Answers (3)

Pekka
Pekka

Reputation: 449415

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>

Upvotes: 7

Stephen P
Stephen P

Reputation: 14800

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.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

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...)

Upvotes: 0

Related Questions