Forum Moderators: open
<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.
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>
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.)
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].
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>
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.
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.
