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'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>
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; }