www.webdeveloper.com
Results 1 to 5 of 5

Thread: Forms and CSS

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24

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

    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>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The label has been applied incorrectly, it should be wrapped around the input.
    A redesign of the css is required.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.

  5. #5
    Join Date
    Mar 2006
    Posts
    194
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles