homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved