/    Sign up×
Community /Pin to ProfileBookmark

Forms and CSS

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?

[code=php]
<?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>
[/code]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@FangJan 29.2004 — The label has been applied [URL=http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL]incorrectly[/URL], it should be wrapped around the input.

A redesign of the css is required.
Copy linkTweet thisAlerts:
@ray326Jan 29.2004 — [i]Originally posted by Fang [/i]

[B]The label has been applied [URL=http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL]incorrectly[/URL], it should be wrapped around the input.

A redesign of the css is required. [/B]
[/QUOTE]

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.
Copy linkTweet thisAlerts:
@FangJan 29.2004 — You're correct, it is optional.

As for the label element it doesn't work in [URL=http://www.evolt.org/article/Form_Labels/4090/15823/]older browsers[/URL], Netscape7 is ok, but in Netscape6 label is only partially supported.

A radio or checkbox works , but not a text input with label.
Copy linkTweet thisAlerts:
@kessaApr 03.2006 — 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:

[COLOR=Gray]<label for="whatever"><span>Whatever</span></label> <input name="whatever" id="whatever" type="checkbox" />[/COLOR]

And the CSS would look like:

[COLOR=Gray]

label span {color:red;}[/COLOR]


Hope that helps?

Kessa
×

Success!

Help @careyf spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...