I found some code on codingforum.com which formats forms with CSS. However, when I tried it, it does not display the labels on Netscape 7.0 (WinXP). It only shows the input fields. Can anyone tell me what is wrong with it?
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Form + Label</title>
<style type="text/css" media="screen">
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br
{
clear: left;
}
</style>
</head>
<body>
<form id="MainForm">
<label for="name">Name</label>
<input id="name" /><br />
<label for="address">Address</label>
<input id="address" /><br />
<label for="city">City</label>
<input id="city" /><br />
</form>
</body>
</html>The label has been applied incorrectly (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html401/interact/f ... edef-LABEL</a><!-- m -->), it should be wrapped around the input.
A redesign of the css is required.Originally posted by Fang
The label has been applied incorrectly (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html401/interact/f ... edef-LABEL</a><!-- m -->), it should be wrapped around the input.
A redesign of the css is required.
That's just an optional syntax. What he's got is correct and it shows up correctly on IE 6 and Moz 1.5 so I don't really know what the problem is.You're correct, it is optional.
As for the label element it doesn't work in older browsers (<!-- m --><a class="postlink" href="http://www.evolt.org/article/Form_Labels/4090/15823/">http://www.evolt.org/article/Form_Labels/4090/15823/</a><!-- m -->), Netscape7 is ok, but in Netscape6 label is only partially supported.
A radio or checkbox works , but not a text input with label.Hi Ray326,
Just in case you (or anyone else) needs the answer to this, I think that this is happening becuase of a bug with the Netscape browser which prevents certain styling from being applied direct to the label element.
Instead, you need to insert an empty <span> and assign the styling to that.
So for example, the form would look like:
<label for="whatever"><span>Whatever</span></label> <input name="whatever" id="whatever" type="checkbox" />
And the CSS would look like:
label span {color:red;}
Hope that helps?
Kessa
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Form + Label</title>
<style type="text/css" media="screen">
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br
{
clear: left;
}
</style>
</head>
<body>
<form id="MainForm">
<label for="name">Name</label>
<input id="name" /><br />
<label for="address">Address</label>
<input id="address" /><br />
<label for="city">City</label>
<input id="city" /><br />
</form>
</body>
</html>The label has been applied incorrectly (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html401/interact/f ... edef-LABEL</a><!-- m -->), it should be wrapped around the input.
A redesign of the css is required.Originally posted by Fang
The label has been applied incorrectly (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html401/interact/f ... edef-LABEL</a><!-- m -->), it should be wrapped around the input.
A redesign of the css is required.
That's just an optional syntax. What he's got is correct and it shows up correctly on IE 6 and Moz 1.5 so I don't really know what the problem is.You're correct, it is optional.
As for the label element it doesn't work in older browsers (<!-- m --><a class="postlink" href="http://www.evolt.org/article/Form_Labels/4090/15823/">http://www.evolt.org/article/Form_Labels/4090/15823/</a><!-- m -->), Netscape7 is ok, but in Netscape6 label is only partially supported.
A radio or checkbox works , but not a text input with label.Hi Ray326,
Just in case you (or anyone else) needs the answer to this, I think that this is happening becuase of a bug with the Netscape browser which prevents certain styling from being applied direct to the label element.
Instead, you need to insert an empty <span> and assign the styling to that.
So for example, the form would look like:
<label for="whatever"><span>Whatever</span></label> <input name="whatever" id="whatever" type="checkbox" />
And the CSS would look like:
label span {color:red;}
Hope that helps?
Kessa