valign=“top” not working in one cell

Question

I have a table set up where the left column is set to valign = "top". It works in all the cells except for the last one. I'm not applying any classes to this cell, so I'm really confused.

My demo site is located here here. The issue is with the cell containing the word "message*" at the bottom of the page.

Here is the HTML:

<form action="form.php" method="post" class="form" id="contact">
    <table width="100%" border="0" cellspacing="0">
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="name" class="lable">name<span class="red">*</span></label></td>
            <td align="left" valign="top">
            <input name="name" type="text" class="textfield" id="name" value="what do you call yourself?" size="50" maxlength="30" /></td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="email" class="lable">e-mail<span class="red">*</span></label></td>
            <td align="left" valign="top">
            <input name="email" type="text" class="textfield" id="e-mail" value="i promise i won't spam you." size="50" maxlength="50" /></td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="project" class="lable">project</label></td>
            <td align="left" valign="top">
            <div class="selectBG">
                <span>please select...</span>
                <select name="project" id="project">
                <option>please select...</option>
                <option value="branding">branding</option>
                <option value="logo">logo</option>
                <option value="package">package</option>
                <option value="poster">poster</option>
                <option value="puclication">publication</option>
                <option value="website">website</option>
                <option value="other">other</option>
                </select> </div>
            </td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="budget" class="lable">budget</label></td>
            <td align="left" valign="top">
            <div class="selectBG">
                <span>please select...</span> <select name="budget" id="budget">
                <option value="please select..." selected="selected">please select...
                </option>
                <option value="100-500">$100-$500</option>
                <option value="500-1,000">$500-$1,000</option>
                <option value="1,000-2,000">$1,000-$2,000</option>
                <option value="2,000-5,000">$2,000-$5,000</option>
                <option value="5,000-10,000">$5,000-$10,000</option>
                <option value="10,000+">$10,000+</option>
                </select> </div>
            </td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="timeframe" class="lable">timeframe</label></td>
            <td align="left" valign="top">
            <div class="selectBG">
                <span>please select...</span>
                <select name="timeframe" id="timeframe">
                <option value="please select..." selected="selected">please select...
                </option>
                <option value="asap">asap</option>
                <option value="within 1 month">within 1 month</option>
                <option value="within 2 months">within 2 months</option>
                <option value="within 3 months">within 3 months</option>
                <option value="within 6 months">within 6 months</option>
                <option value="not sure">not sure</option>
                </select> </div>
            </td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top">
            <label for="message" class="lable top">message<span class="red">*</span></label></td>
            <td align="left" valign="top">
            <textarea name="message" id="message" cols="40" rows="5" class="textarea">what&#39;s on your mind?</textarea></td>
        </tr>
        <tr>
            <td width="20%" align="left" valign="top"></td>
            <td align="left" valign="top">
            <input type="reset" name="reset" id="reset" value="reset" class="btn" />
            <input name="submit" type="submit" class="btn" id="submit" onclick="MM_validateForm('name','','R','e-mail','','RisEmail','message','','R');return document.MM_returnValue" value="submit" /></td>
        </tr>
    </table>
</form>

Answer 1

You have vertical-align: baseline for label's -- change that to :top

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,     a, abbr, acronym, address, big, cite,     code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,     fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,     figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0 none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

you could also just do:

td { vertical-align: top; }

Answer 2

The base style from layout.css is setting vertical-align: base-line

on all elements, add a class to set it to top and use that class for all the label TDs you want to be aligned to the top

.form-label {
  vertical-align: top;
}

<td class="form-label">

if you really want to embed the style do this

<td width="20%" align="left" style="vertical-align: top;">

Answer 3

You can do it either way the above posters explained. The valign attribute has been deprecated in favor of using css to do it. The second poster describes how to define the css in tag instead of on a stylesheet.