Outlook 2007 and 2010 table cell formatting lost with long content - outlook

Question

The set up:
<table width="600" >
<tr>
<td width="400" rowspan="2" valign="top">
With very long content here*
</td>
<td width="200" valign="top">
Top-aligned content
</td>
</tr>
<tr>
<td valign="bottom">
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
</tr>
</table>
Example code is in jsfiddle as it is too long (lots of content needed to trigger the bug).
So see these:
http://jsfiddle.net/webhelpla/XZyg2/ sent as an email looks OK
http://jsfiddle.net/webhelpla/XZyg2/1/ sent as an email: bottom-aligned content is not bottom-aligned anymore.
Any ideas and experience with workarounds for this?

Answer 1

try adding vertical-align:bottom; as well,
<td valign="bottom" style='vertical-align:bottom;' >
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
try this fiddle. i removed the rowspan=2 from the td, always use cellpadding in place of that.

Answer 2

Add table-layout:fixed to the css for the table and see if that helps. Coder1984 is correct in adding the "style=" tag inside the td since some email clients do better with that....
At any rate, it is very hard to predict how html email will render in various clients. I use email on acid to check rendering in a wide range of clients, from webmail through email clients to mobile....

Answer 3

Outlook has an issue with content of blocks over a certain size (2300px if I remember correctly). You may be able to avoid the issue with a third cell in your right-hand row:
<table width="600" >
<tr>
<td width="400" rowspan="3" valign="top">
With very long content here*
</td>
<!-- Add minimal heights to force the middle row to take the space -->
<td width="200" valign="top" height="1">
Top-aligned content
</td>
</tr>
<tr><td style="page-break:always"><!-- Let's make a page break *here* --></td></tr>
<tr>
<td valign="bottom" height="1">
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
</tr>
</table>