Forum Moderators: open
<li> <label for="objectId1">
<input type="radio" value="38" onclick="load(this)" id="objectId1" />
<div><p>$70</p></div>
</label>
</li>
The "div" has a background image and style associated with it.
li div {
background-image:url(../images/edit-checkout-round-value.gif);
clear:none;
float:left;
height:68px;
margin:0 10px;
width:105px;
}
So, the problem is that, while the "div" next to the radio button is clickable in all other browsers, its not clickable in firefox.
I tried replacing the div with a span which had the same style as the div but that didnt work.
I'm not sure what else I can try.
Can someone please suggest a way of making the area next to the radio button clickable while keeping the same look?
Thanks.
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 { }