Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Div inside a label for a radio button - cannot click in Firefox



6:14 am on Sep 9, 2009 (gmt 0)

5+ Year Member

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

The "div" has a background image and style associated with it.

li div {
margin:0 10px;

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?



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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.

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

Style the anchor any way you want,

#product-list li label a { }


5:15 pm on Sep 9, 2009 (gmt 0)

5+ Year Member

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


12:53 am on Sep 10, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month