homepage Welcome to WebmasterWorld Guest from 54.226.136.179
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Problem with checkboxes in mozilla
vikasvrao

5+ Year Member



 
Msg#: 4027671 posted 6:14 pm on Nov 18, 2009 (gmt 0)

Hi guys,
I have 2 check boxes in a list like this:

<ul>
<li>
<label for="shippingInfoBox">
<input type="checkbox" checked value="address" id="shippingInfoBox" />
My billing address is the same as my shipping address. </label>
</li>
<li> <label for="agreeToTerms"> <input type="checkbox" checked value="agree" name="agreeToTerms" id="agreeToTerms"/>
YES, I have read and agree to Terms of Use
</label>
</li>
</ul>

I have 2 issues with this:

1. In Firefox, although my first input checkbox is "checked", it is not checked when the page loads.
2. In Firefox, the 2 checkboxes are next to each other, instead of one below the other.

What am I doing wrong?

Can someone please help. Thanks.

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4027671 posted 6:26 pm on Nov 18, 2009 (gmt 0)

It works fine for me. I suspect you have some CSS styles that are being applied that are the cause of your layout issues.

Here's my test case:

<html>
<head>
<title>Test</title>
</head>
<body>
<ul>
<li>
<label for="shippingInfoBox">
<input type="checkbox" checked value="address" id="shippingInfoBox" />
My billing address is the same as my shipping address. </label>
</li>
<li> <label for="agreeToTerms"> <input type="checkbox" checked value="agree" name="agreeToTerms" id="agreeToTerms"/>
YES, I have read and agree to Terms of Use
</label>
</li>
</ul>
</body>
</html>

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4027671 posted 7:06 pm on Nov 18, 2009 (gmt 0)

1) Both boxes are checked on this machine with FF 3.5.1

2) One is right below the the other.

I see no issue. Perhaps you have <li> inline or some such?

(Depending upon your DTD 'checked' is going to cause validation problems. Certainly with XHTML Strict. Easily enough fixed.)

rocknbil

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



 
Msg#: 4027671 posted 10:24 pm on Nov 22, 2009 (gmt 0)

1. In Firefox, although my first input checkbox is "checked", it is not checked when the page loads.

Although it should not be a cause, if you are using a valid XHTML doctype (for whatever reason you are doing that) in Standards Compliance mode the proper checked attribute is

<input type="checkbox" value="address" id="shippingInfoBox" checked="checked" />

Although that should not be the problem, you can try. I have seen **many** weirdnesses with FF radios, but checkboxes seem to behave normally.

A second possibility is user persistence, if it's cached and you re-visit the page in the same session, FF will retain the values. Try clearing your cache and see if you can duplicate the problem.

2. In Firefox, the 2 checkboxes are next to each other, instead of one below the other.

As said, css/layout, inline, float . . .

Though it most likely doesn't have anything to do with it, you can try keeping your labels confined to labels [webmasterworld.com].

vikasvrao

5+ Year Member



 
Msg#: 4027671 posted 12:38 am on Nov 23, 2009 (gmt 0)

Keeping labels confined to labels solves the problem, but that means the text next to the checkbox is not clickable.

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4027671 posted 1:05 am on Nov 23, 2009 (gmt 0)

Keeping labels confined to labels solves the problem,.....

I remain dubious that this was, or was related to the problem in the first place. Nevertheless.....
....................................

Keeping labels confined to labels solves the problem, but that means the text next to the checkbox is not clickable.

Then there is a separate issue involved. ? ?

The whole point of 'for' in the <label> is to associate the label with the id with the input.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

</style>
</head>
<body>
<form action="">
<ul>
<li>
<label for="shippingInfoBox">
My billing address is the same as my shipping address.
<input type="checkbox" value="address" id="shippingInfoBox" />
</label>
</li>
<li>
<label for="agreeToTerms">
YES, I have read and agree to Terms of Use
</label>
<input type="checkbox" checked="checked" value="agree" name="agreeToTerms" id="agreeToTerms" />
</li>
</ul>
</form>
<!--##########
1. In Firefox, although my first input checkbox is "checked", it is not checked when the page loads.
2. In Firefox, the 2 checkboxes are next to each other, instead of one below the other.

Keeping labels confined to labels solves the problem, but that means the text next to the checkbox is not clickable.
-->
</body>
</html>

Validates and functions. Click on the text, and check or uncheck the box at will. If you want a 'visual cue', then try something like:

li:hover {
background-color: #faebd7;
}

You will need to fix a width for your <ul> or <li>

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4027671 posted 1:37 am on Nov 23, 2009 (gmt 0)

Oops. While moving stuff around in the example, including one box checked and one box not checked, I lost track of closing a <label>

Obviously, the first <li> should be:

<li>
<label for="shippingInfoBox">
My billing address is the same as my shipping address.
</label>
<input type="checkbox" value="address" id="shippingInfoBox" />
</li>

Sorry.

rocknbil

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



 
Msg#: 4027671 posted 5:40 pm on Nov 23, 2009 (gmt 0)

Agreed, I don't think the disposition of the label is related to the "checked" problem, and

but that means the text next to the checkbox is not clickable.

No, it should remain clickable, that's one of the inherent functions of label. When it's clicked, it auto-focuses the element it is "for."

I'll bet on caching or some other issue.

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