Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: incrediBILL

Message Too Old, No Replies

Problem with checkboxes in mozilla

   
6:14 pm on Nov 18, 2009 (gmt 0)

5+ Year Member



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.

6:26 pm on Nov 18, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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>
7:06 pm on Nov 18, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:24 pm on Nov 22, 2009 (gmt 0)

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



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

12:38 am on Nov 23, 2009 (gmt 0)

5+ Year Member



Keeping labels confined to labels solves the problem, but that means the text next to the checkbox is not clickable.
1:05 am on Nov 23, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

1:37 am on Nov 23, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

5:40 pm on Nov 23, 2009 (gmt 0)

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



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.