how to vertically align a <input> and <iframe> inside a <td>?

Question

I've tried putting valign="top" as attribute of <td> but in vain.

<tr>
<td>
    <span class="validationInline">*</span>
    Security Code:
</td>
<td valign="top">
    <input type="text" />
    <iframe scrolling="no" height="21px" frameborder="0" width="62px" marginheight="0" marginwidth="0" src="http://google.com"&gt;&lt;/iframe&gt;
</td>
</tr>

It seems that <input> aligns itself to the buttom,while <iframe> to the top.

Answer 1

<td valign="top"><input type="text" />
  <iframe scrolling="no" height="18" frameborder="0" width="62" marginheight="0" marginwidth="0" src="http://google.com"&gt; </iframe></td>

The above works for me... It aligns the content to the top of the cell. Is this what you're after?

Answer 2

From your description it seems that the cell is aligning to the top, but the input/iframe are aligning to each other at the bottom. Vertical alignment generally only applies to sibling elements.

What you'll need to do is set the CSS vertical-align:top property on both the input and iframe.

<td valign="top">
  <input style="vertical-align:top" type="text" />
  <iframe style="vertical-align:top" scrolling="no" height="18" frameborder="0" width="62" marginheight="0" marginwidth="0" src="http://google.com"&gt; </iframe>
</td>