valign = "top"が1つのセルで動作しない

Question

左側の列がvalign = "top"に設定されているテーブルを設定しました。最後のものを除くすべてのセルで機能します。私はこのセルにクラスを適用していないので、私は本当に混乱しています。

私のデモサイトはhereにあります。問題は、ページの下部に「メッセージ*」という単語が含まれているセルで発生します。あなたが垂直整列を持って

<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

：ここ

はHTMLです - ラベルのためのベースラインがにそれを変更：トップ

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

あなたはまた、単に行うことができます：

td { vertical-align: top; } 

Answer 2

layout.cssの基本スタイルは、 の垂直整列を設定しています。ベースライン

あなたは本当にスタイルを埋め込みたい場合は、すべての要素に

は、この

を行うトップあなたがトップ

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

<td class="form-label"> 

に整列したいすべてのラベルのTDため、そのクラスを使用するように設定するクラスを追加します

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

Answer 3

上記のポスターのいずれかを説明できます。 valign属性は、cssを使用して行うことを前提に廃止されました。 2番目のポスターでは、スタイルシートではなくタグでcssを定義する方法について説明しています。