HTML Form Input/Label Alignment

Question

I'm trying to create a simple registration form. In order to align everything neatly I used the table method. However the text isn't aligned in the center of the table instead being very slightly below the table. I've used similar methods before and had it work fine though.

You can see the problem here. http://www.krawczyksolutions.com/sender/register.php

The code for the table is

<div class="head" align="center">
    <div align="center" class="box">
        <h2>Register New Account</h2><p/>
        <form name="regform" action="javascript:checkForm();">
            <table>
                <tr>
                    <td>First Name:   </td>
                    <td><input type="text" name="fname" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Last Name:   </td>
                    <td><input type="text" name="lname"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Company:   </td>
                    <td><input type="text" name="comp"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Address Line 1:   </td>
                    <td><input type="text" name="add1" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Address Line 2:   </td>
                    <td><input type="text" name="add2" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>City:   </td>
                    <td><input type="text" name="city" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Postcode:   </td>
                    <td><input type="text" name="post" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Country:   </td>
                    <td><input type="text" name="countr" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Email:   </td>
                    <td><input type="text" name="email" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Email:   </td>
                    <td><input type="text" name="cemail" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Password:   </td>
                    <td><input type="password" name="pass" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Password:   </td>
                    <td><input type="password" name="cpass" class="input" size="30" /><p/></td>
                </tr>
            </table>
            <input type="submit" value="Proceed To Payment"/><p/>
        </form>
    </div>
</div>

The CSS file contains the following (NOTE: Some of the elements in the CSS file arn't used on this page).

body
{
    background-image:url("img/backgr.jpg");
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
}
#header 
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#footer
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#leftcol
{
    position: absolute;
    left: 150px;
    top: 160px;
    width:400px;
}
#rightcol 
{
    position: absolute;
    right: 150px;
    top: 220px;
    width: 300px;
}
.inputbox
{
    background-color:black;
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
    box-shadow:1px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.box {width:700px;padding:15px;background-color:#fff;margin-bottom:18px;border-radius:0.6em;-moz-border-radius:0.6em;-webkit-border-radius:0.6em;}
.box {
    -moz-box-shadow: 4px 4px 5px #111;
    -webkit-box-shadow: 4px 4px 5px #111;
    box-shadow: 4px 4px 5px #111;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}
.head
{
    margin-top:50px;
}
.input
{
    font-size:14px;
}

UPDATE

Although mason81 did solve this particular problem, anyone else coming across this should read Truth's answer regarding using just CSS rather than tables to align it. Much better and easier way to do it.

Start with a CSS reset, and then these problems either go away, or are much easier to fix. Check out the HTML5Boilerplate for a good place to start: http://html5boilerplate.com/ — cdeszaq, Dec 07 '11 at 15:39

score 5 · Accepted Answer · answered Dec 07 '11 at 15:39

5

Try this:

tr
{
  vertical-align:text-bottom;
}

answered Dec 07 '11 at 15:39

mason81

1,730
2
18
33

Worked perfectly. However why did that work. The text was sitting in the middle of the tr element and the input box was sitting in the top, so why does aligning bottom put them both into middle of tr element. – Flatlyn Dec 07 '11 at 15:52
@JamesKraw this answer will solve your symptom, but not the problem. Don't use tables for layout. It **will** bite you back eventually. – Madara's Ghost Dec 07 '11 at 15:53
I have marked this as the correct answer since it did solve the question asked, but if I could marked two answers your answer would be marked too. – Flatlyn Dec 07 '11 at 16:00
I understand why you used tables @JamesKraw though Truth makes a good point. Thank you for accepting my answer and I am glad it was helpful. It looks like this was a fruitful experience for you, that is encouraging. – mason81 Dec 07 '11 at 16:09

score 5 · Answer 2 · answered Dec 07 '11 at 15:53

5

You don't need to use a table. Use the label itself to align the form.

See this example

answered Dec 07 '11 at 15:53

Madara's Ghost

172,118
50
264
308

old habit die hard, but indeed I suppose I should migrate to using just CSS. – Flatlyn Dec 07 '11 at 15:58
1

If one of the names is particularly long this will break the design. – novacara Dec 07 '11 at 16:06
@novacara oh, if the label is too long. In which case, yes. It will break, you'll have to increase the width. Note that I can easily do it with `` and then the problem would be solved. – Madara's Ghost Dec 07 '11 at 16:29

score 2 · Answer 3 · answered Dec 07 '11 at 15:43

2

The reason it is doing that is because of the <p/> tags in the right-hand table cells. Take those out and if you want more space between the rows add padding styles to all the table cells.

EXAMPLE

td
{
   padding-bottom: 10px;
}

answered Dec 07 '11 at 15:43

novacara

2,207
4
24
34

score -2 · Answer 4 · answered Dec 07 '11 at 15:41

-2

Try

<td align=center>name</td>

answered Dec 07 '11 at 15:41

Livelines

9
5

1

-1 Use CSS for styles. Using HTML attributes to style things is bad. – cdeszaq Dec 07 '11 at 15:48

HTML Form Input/Label Alignment

4 Answers4