valign = "top" не работает в одной ячейке - PullRequest
Новая
       40

valign = "top" не работает в одной ячейке

0 голосов
/ 21 марта 2012

У меня есть таблица, в которой для левого столбца установлено значение valign = "top".Работает во всех клетках, кроме последней.Я не применяю никаких классов к этой ячейке, поэтому я в замешательстве.

Мой демонстрационный сайт находится здесь здесь .Проблема связана с ячейкой, содержащей слово «message *» внизу страницы.

Вот 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>

Ответы [ 3 ]

2 голосов
/ 21 марта 2012

У вас есть вертикальное выравнивание: базовая линия для меток - измените это на: 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;
}

, вы также можете просто сделать: 

td { vertical-align: top; }
0 голосов
/ 21 марта 2012

Вы можете сделать это так, как описано выше.Атрибут valign устарел в пользу использования css для этого.Второй плакат описывает, как определить CSS в теге, а не в таблице стилей.

0 голосов
/ 21 марта 2012

Базовый стиль из layout.css устанавливает вертикальное выравнивание: base-line

для всех элементов, добавьте класс, чтобы установить его на вершину, и используйте этот класс для всех меток TD, которые вы хотите использовать.выровнен по верху 

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

<td class="form-label">

, если вы действительно хотите встроить стиль, сделайте это 

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