Problem formatting forms w/ floats

Discussion in 'HTML' started by clumsy_ninja, Feb 16, 2008.

  1. clumsy_ninja

    clumsy_ninja Guest

    I've been trying to format my form several different ways with floats:
    1. no speacial markup used = input elements don't clear in IE
    2. adding a br element after each input element
    3. using <li> elements to group the <label> and <input> = li elements
    indent oddly in Firefox

    Using br elements works, but is there was a way to do this without
    using extra markup like tables and br elements? Is there a CSS-only
    solution to this problem?

    TIA for any help!




    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    input,
    label {
    float: left;
    display: block; /* unneeded? */
    width: 4em;
    }

    input {
    margin-bottom: 1em;
    width: 10em;
    }

    label {
    clear: left;
    width: 8em;
    margin-right: 1em;
    text-align: right;

    background-color: #FFCC33;
    }

    ul { list-style: none; }

    </style>

    </head>

    <body>

    <fieldset>
    <legend>Contact Information</legend>
    <form>
    <label for="name_data1">Name</label>
    <input name="name_data" id="name_data1" type="text" />

    <label for="name_data2">Name</label>
    <input name="name_data" id="name_data2" type="text" />

    <label for="name_data3">Name</label>
    <input name="name_data" id="name_data3" type="text" />
    </form>
    </fieldset>

    <fieldset>
    <legend>Contact Information (using br)</legend>
    <form>
    <label for="name_data6">Name</label>
    <input name="name_data" id="name_data6" type="text" /><br />

    <label for="name_data7">Name</label>
    <input name="name_data" id="name_data7" type="text" /><br />

    <label for="name_data8">Name</label>
    <input name="name_data" id="name_data8" type="text" /><br />
    </form>
    </fieldset>

    <fieldset>
    <legend>Contact Information (using ul)</legend>
    <form>
    <ul>
    <li>
    <label for="name_data11">Name</label>
    <input name="name_data" id="name_data11" type="text" />
    </li>
    <li>
    <label for="name_data12">Name</label>
    <input name="name_data" id="name_data12" type="text" />
    </li>
    <li>
    <label for="name_data13">Name</label>
    <input name="name_data" id="name_data13" type="text" />
    </li>
    </ul>
    </form>
    </fieldset>

    </body>
    </html>
    clumsy_ninja, Feb 16, 2008
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed clumsy_ninja
    <> writing in news:118b27a8-bf0b-45e0-9ca0-
    :

    > I've been trying to format my form several different ways with floats:
    > 1. no speacial markup used = input elements don't clear in IE
    > 2. adding a br element after each input element
    > 3. using <li> elements to group the <label> and <input> = li elements
    > indent oddly in Firefox
    >
    > Using br elements works, but is there was a way to do this without
    > using extra markup like tables and br elements? Is there a CSS-only
    > solution to this problem?
    >
    > TIA for any help!
    >


    You could check http://intraproducts.com/usenet/requiredform.asp and see
    if that's any help.

    Also, it's better to post a URL than markup.
    1) It's easier for someone here to help you as they do not have to open
    up and editor and copy/paste your markup
    2) You may have omitted something in your post that effects the page in
    question.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Feb 17, 2008
    #2
    1. Advertising

  3. Scripsit clumsy_ninja:

    > I've been trying to format my form several different ways with floats:


    Why? What would you like to float and why? What's the real problem or
    purpose, as opposite to an assumed CSS solution of using "floats"?

    > 1. no speacial markup used = input elements don't clear in IE


    What? Oh, you mean line breaks. Use block-level markup for things that
    should have line breaks before and after.

    > 2. adding a br element after each input element


    Well, that's a clumsy though feasible way, too.

    > 3. using <li> elements to group the <label> and <input> = li elements
    > indent oddly in Firefox


    Somewhat odd markup, but possible. It's not commonly used. If you use
    it, you probably want to kill the bullets using list-style: none in CSS,
    and you should set all margin and padding properties both for <ul> and
    for <li> elements there.

    Choose your markup, then explain what problems you have with it, and
    post the URL.

    > Using br elements works, but is there was a way to do this without
    > using extra markup like tables and br elements? Is there a CSS-only
    > solution to this problem?


    Do you mean that you would want the labels and fields to appear
    consecutively, with browser-generated line breaks at random points, when
    your style sheet is not applied? I'm afraid you've missed the CSS
    Caveats:
    http://www.cs.tut.fi/~jkorpela/css-caveats.html

    A table is the most flexible approach, if you want tabular appearance of
    labels and fields, since then you won't need to make a guess on how wide
    the label elements need to be. See
    http://www.cs.tut.fi/~jkorpela/forms/tables.html

    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://


    Why? Which part of XML, as opposite to SGML, are you making use of?

    > <fieldset>
    > <legend>Contact Information</legend>
    > <form>


    The fieldset logically belongs inside the form. I don't know what
    happens in different browsers if you nest them in an illogical way, and
    I think I don't want to know that.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 17, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frigett

    forms and table formatting

    Frigett, Jul 30, 2004, in forum: HTML
    Replies:
    1
    Views:
    402
    Adrienne
    Aug 1, 2004
  2. Kevin Smith

    Formatting floats

    Kevin Smith, Dec 11, 2003, in forum: Python
    Replies:
    1
    Views:
    297
    Dan Bishop
    Dec 12, 2003
  3. Replies:
    3
    Views:
    334
    Jukka K. Korpela
    Aug 1, 2006
  4. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,244
    Tim Rentsch
    Sep 23, 2005
  5. Eric
    Replies:
    2
    Views:
    458
Loading...

Share This Page