CSS in Forms

Discussion in 'HTML' started by Lawrence, Dec 19, 2006.

  1. Lawrence

    Lawrence Guest

    Quick question I am trying to style my submit button so it is line with
    the input boxes. However this is not working:

    input.sub
    {
    margin-left: 4.5em;
    }

    The html bit is this:

    <div id="main-text">
    <!-- Insert your page here -->
    <h1>Please Register</h1>
    <p>Enter your desired username and password</p>
    <div id="register-form">
    <form action="#">
    <fieldset>
    <legend> Registration</legend>
    <p><label for="name">Name</label> <input type="text" id="name"
    /></p>
    <p><label for="e-mail">E-mail</label> <input type="text"
    id="e-mail" /></p>
    <p><input class="sub" type="submit" value="Submit" /></p>
    </fieldset>
    </form>
    </div>


    </div>


    I have styled the inputs and labels correctly but I am having trouble
    with the submit button!


    Thanks

    Lawrence
    Lawrence, Dec 19, 2006
    #1
    1. Advertising

  2. Lawrence

    PseudoMega Guest

    > I have styled the inputs and labels correctly but I am having trouble
    > with the submit button!


    Are you trying to align the left edge of the button with the left edges
    of the text inputs?

    I hate tables, but I'd probably resort to using one in this instance.

    <table>
    <tr>
    <td align="right">Name</td>
    <td align="left"><input type="text" id="name" /></td>
    </tr>
    <tr>
    <td align="right">E-mail</td>
    <td align="left"><input type="text" id="e-mail" /></td>
    </tr>
    <tr>
    <td align="right">&nbsp;</td>
    <td align="left"><input class="sub" type="submit" value="Submit"
    /></td>
    </tr>
    </table>
    PseudoMega, Dec 19, 2006
    #2
    1. Advertising

  3. Lawrence

    Lawrence Guest

    Thats pretty much what i want to do just without tables unless I really
    have to!
    PseudoMega wrote:
    > > I have styled the inputs and labels correctly but I am having trouble
    > > with the submit button!

    >
    > Are you trying to align the left edge of the button with the left edges
    > of the text inputs?
    >
    > I hate tables, but I'd probably resort to using one in this instance.
    >
    > <table>
    > <tr>
    > <td align="right">Name</td>
    > <td align="left"><input type="text" id="name" /></td>
    > </tr>
    > <tr>
    > <td align="right">E-mail</td>
    > <td align="left"><input type="text" id="e-mail" /></td>
    > </tr>
    > <tr>
    > <td align="right">&nbsp;</td>
    > <td align="left"><input class="sub" type="submit" value="Submit"
    > /></td>
    > </tr>
    > </table>
    Lawrence, Dec 19, 2006
    #3
  4. Lawrence wrote:
    > Thats pretty much what i want to do just without tables unless I really
    > have to!
    > PseudoMega wrote:
    >>> I have styled the inputs and labels correctly but I am having trouble
    >>> with the submit button!

    >> Are you trying to align the left edge of the button with the left edges
    >> of the text inputs?


    Well can make the argument that it is tabular data as two columns
    "name|value" pairs. But you can also do it without a table, although IE
    is problematic as usual...


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.orgR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>No Table<title>

    <style type="text/css">
    /*
    IE won't properly clear floats on LABEL so can fudge by
    applying a contraining width to the form or (UGH! use a BR)
    */
    #register-form { width: 15em; }
    #register-form LABEL,
    #register-form INPUT { display: block; float: left; margin: .2em; }

    #register-form LABEL { width: 3em; clear: left; }

    /*
    Again IE does support matching attributes selector
    so IE needs a class also IE has a double margin bug
    on floated block...
    */
    #register-form .sub { clear: left; margin-left: 2em; }

    /*
    Now the correct values for real web browsers
    */
    #register-form INPUT[type="submit"] { clear: left; margin-left:
    4.2em; }
    </style>

    </head>
    <body>

    <h1>Please Register</h1>

    <p>Enter your desired username and password</p>

    <div id="register-form">
    <form action="#">
    <fieldset>
    <legend>Registration</legend>
    <label for="name">Name</label><input type="text" id="name">
    <label for="e-mail">E-mail</label><input type="text" id="e-mail">
    <input class="sub" type="submit" value="Submit">
    </fieldset>
    </form>
    </div>

    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 19, 2006
    #4
    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. Brendan Miller

    Web Forms VS Windows Forms

    Brendan Miller, Aug 11, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    5,055
    Kevin Spencer
    Aug 11, 2003
  2. Eric
    Replies:
    2
    Views:
    1,388
    Tommy
    Feb 13, 2004
  3. jlopes151
    Replies:
    2
    Views:
    603
    Steve C. Orr [MVP, MCSD]
    Mar 14, 2005
  4. =?Utf-8?B?ZGF2aWQ=?=

    embedded windows forms into web forms for control

    =?Utf-8?B?ZGF2aWQ=?=, Apr 7, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    5,197
    =?Utf-8?B?ZGF2aWQ=?=
    Apr 10, 2005
  5. Eric
    Replies:
    2
    Views:
    463
Loading...

Share This Page