tags:

views:

86

answers:

4

I got a <td> where two images () reside shown as follows. One is much higher than the other. How do I let the shorter one align to the top of <td />?

<td  style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png"/>
<img src=".../icon_live.gif" /> // shorter one
</td>
+1  A: 

If you give a class to your <img class="tops"> then the CSS

.tops {
   vertical-align: top;
}

will bind the top edge of the images to the table cell top.

msw
Hmm, the example page that I am looking at right now differs from your sample code in two ways. The img tags have `height=` directives and the style is specified as a class. I am now cross-browser testing...
msw
Oops, I really meant the `img` tag attribute.
msw
+2  A: 

You need to set vertical alignment on the images themselves.

<style>
td img { 
  vertical-align: top;
}
</style>
Shawn Steward
+1  A: 

add align="top" to the first image (the tall one)

<td  style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png" align="top" />
<img src=".../icon_live.gif" /> // shorter one
</td>
Hery
I'm pretty sure you'd need to set it to the smaller one rather than the larger one if you just set one of them.
Shawn Steward
+1  A: 

try this..

<td cellpadding="0" valign="top">
  <img width="85" src=".../xyz.png" style="display:inline;"/>
  <img src=".../icon_live.gif" style="display:inline;" />
</td>
ZX12R