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.

Answer 1

Try this:

tr
{
  vertical-align:text-bottom;
}