Forms and CSS

**careyf** · 01-28-2004 09:49 PM

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?

PHP Code:


<?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>

**Fang** · 01-29-2004 01:01 AM

The label has been applied incorrectly, it should be wrapped around the input.
A redesign of the css is required.

**ray326** · 01-29-2004 12:31 PM

Originally posted by Fang
The label has been applied incorrectly, 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.

**Fang** · 01-29-2004 01:36 PM

You're correct, it is optional.
As for the label element it doesn't work in older browsers, Netscape7 is ok, but in Netscape6 label is only partially supported.
A radio or checkbox works , but not a text input with label.

**kessa** · 04-03-2006 06:10 PM

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

Thread: Forms and CSS

Thread Tools

Display

Forms and CSS

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions