Page is a not externally linkable
- Browsers
-- Firefox Browser Usage and Support
---- Div inside a label for a radio button - cannot click in Firefox


rocknbil - 4:31 pm on Sep 9, 2009 (gmt 0)


Welcome aboard vikasvrao, you will get more expert recommendations here - but basically this is all invalid html and semantically incorrect.

Labels are inline. Divs, paragraphs, list items are block elements. You cannot put block elements inside inline elements. Furthermore- and I've seen this a lot, I don't know why people do this - a label is just that, it's only supposed to contain the label itself and describe the form control, not the entire form control to which it refers.

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, <label>First name <input type="text" name="firstname"></label>).

link [w3.org]

Additionally, the semantics of that markup are bloated; one must ask why we have a div inside an LI containing a P when whatever styles you need can be applied just to the P? Taken one step further, when the label is correctly used, why even use a p?

However the answer to your question, why it's not clickable, is that a div does not naturally react to click events. Use the intended element, an anchor, and all will be well.

<li>
<input type="radio" value="38" name="why-does-this-lack-a-name" onclick="load(this)" id="objectId1">
<label for="objectId1"><a href="#" onClick="return yourAction('objectId1');">$70</a></label>
</li>

Style the anchor any way you want,

#product-list li label a { }


Thread source:: http://www.webmasterworld.com/firefox_browser/3986482.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com