| Div inside a label for a radio button - cannot click in Firefox
|
vikasvrao
msg:3986484 | 6:14 am on Sep 9, 2009 (gmt 0) |
Hi everyone,
So I inherited a page from my predecessor who has this code: <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.
|
rocknbil
msg:3986723 | 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 { }
|
vikasvrao
msg:3986749 | 5:15 pm on Sep 9, 2009 (gmt 0) |
Thank you, I realized its not valid html so I ended up using a span tag like this:
<label style="padding-left:15px;padding-top:23px;color:#2554C"
for="customObjectId1">
<input type="radio" name="objectId" id="customObjectId1" value='-1'/> <span style="background-image:url(../images/edit-checkout-round-value.gif); clear:none; float:left; height:68px; margin:10; width:105px;">
$70
</span>
</label>
|
rocknbil
msg:3987015 | 12:53 am on Sep 10, 2009 (gmt 0) |
But you still have the label wrapping the form control. If it's because you want a background over the whole area, I suggest you apply that style to the containing list item.
|
|
|
