Formatting on a PHP form

[jonathan_miles1]

A simple problem but i'm out of ideas

How do i get the text fields to line up with the drop down.

<tr>
<td width="120" height="43">Email Address</td>
<td width="156" height="43">
<p class="center">
<input name = "email" value ="<?php echo $email; ?>"/></p></td>
</tr>

                    <tr>
                        <td width="120">Event Selection</td>
                        <td colspan="2"> <select name = "webinar_selection" size="1">

                                <option>CtrlWORK Personal Efficiency Software 10:30 - 11:30 Wednesday 15.02.12</option>
                                                </select>
                        </td>
                    </tr>

[Ashley_Sheridan]

Well, alignment tends to vary from browser to browser, especially with form controls (and it's sadly one of the areas that CSS is of little help)

You could try giving the form controls a set height in CSS, remove the margin on that <p> tag that's got the input element, and set the vertical-align property on the table cells. Other than that, I'm not sure exactly what you're asking for?

[anakadote]

My first piece of advice is to move away from table-based layouts, even when it comes to forms. Not only is the markup obsolete, but you'll have more control using sectioning elements and CSS. You'll also improve accessibility for your users by developing according to current web standards. (It's also cleaner and requires less code).

<form method="post">
  <label for="form-email">Email Address</label>
  <input type="email" name="email" id="form-email" value="<?php echo $email; ?>">

  <label for="form-webinar">Event Selection</label>
  <select name="webinar" id="form-webinar">
    <option>CtrlWORK Personal Efficiency Software 10:30 - 11:30 Wednesday 15.02.12</option>
  </select>

  <button type="submit" name="submit">Submit</button>
</form>

And your CSS might look something like this (untested):

form {
  width: 360px;
}
label {
  display: block;
  float: left;
  width: 100px;
  padding-right: 5px;
  margin-bottom: 15px;
  text-align: right;
}
input,
select,
textarea {
  float: left;
  width: 250px;
  margin-bottom: 15px;
}
button {
  clear: left;
}

[johanafm]

For minimal changes to your initial html code and minimal addition of CSS, I recommend the following
1. Remove the P element so that you get

<table>
	<tr>
	<td width="120" height="43">Email Address</td>
	<td width="156" height="43">
	<input name = "email" value ="[e-mail]"/>
	</td>
	</tr>

<tr>
<td width="120">Event Selection</td>
<td colspan="2"> <select name = "webinar_selection" size="1">

<option>CtrlWORK Personal Efficiency Software 10:30 - 11:30 Wednesday 15.02.12</option>
</select>
</td>
</tr>
</table>

2. Add the CSS rule

tbody
{
	vertical-align: baseline;
}

While this may not be what you mean with "line up with the drop down", notice that the meaning of this "lining up with" will now be consistent with whatever you put in the second cell of each row. That is, the bottom of letters such as 'a', 'e' etc (not letters such as 'g') have this line (known as the baseline) aligned with the baseline of anything else you put in there, which includes both text in a text input element with super huge font size and a select element with normal font size etc. That is, layout stays consistent and still looks good.

For an example of this, check it out by adding these rules

input { font-size: 1.5em; }
select { font-size: 1.5em; }

Not that you're likely to have those rules, but it makes it more apparent what the baseline alignment really does.

If you really really are looking for vertical-align: bottom, be adviced that browsers treat some elements differently here. Some treat a select element as having its bottom line above the bottom border and others as having the border included. Since border is NOT included in element height (total height for element is top border + top margin + top padding + element height + bottom padding + bottom margin + bottom border), I suppose it makes sens to treat bottom as being bottom of element not counting border, padding or margin.
And the reason that some treat a select element border as part of the element is probably that they never thought someone would not have it. But it is still possible to remove the border, in which case a bottom alignment would look silly if aligning with the bottom border...

Either way, you'd not get consistent results across all browsers due to these differences. So once again, my recommendation is baseline.