Problem with browser based email client

HTML & CSS
1

I created a html email which works well in all the email clients except for browser based, such as gmail and hotmail.

The problem is that only in these clients one of my table cells that extends below the others, therefore causing a white space to break up my vertical line.

Does anyone have any ideas how to fix this? Is there something that allows the image to expand in the <td> cell if it changes size? Thank you.

Here is the code

<table width="600" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center" border="0">
<tr><td width="78" valign="bottom" align="left">
<img src="http://aligncreative.com/img/top_line.gif" alt="" width="78" height="125" border="0"></td>
<td width="309" valign="middle" align="left" bgcolor="#ffd600" style= "padding-left:45px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:130%; font-weight:bold;" > <a href="#" style="text-decoration:none; color:#000;">
BOOST your knowledge!
</a></td><td width="161" valign="bottom" align="center"> <a href="#" style="text-decoration:none">
<img src="http://aligncreative.com/img/know.gif" alt="knowing illustration" width="161" height="125" border="0">
</a></td>
<td width="52" valign="bottom" align="center">
<img src="http://aligncreative.com/img/spacer.gif" alt="" width="52" height="125" border="0">
</td></tr></table>


<table width="600" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center" border="0">
<tr>

<td width="78" valign="top" align="left">
<img src="http://aligncreative.com/img/bottom_line.gif" alt="" width="78" height="53" border="0"></td>

<td width="19" valign="top" align="left">
<img src="http://aligncreative.com/img/arrow.gif" alt="arrow" width="19" height="53" border="0"></td>

<td width="112" valign="top" align="left">
<img src="http://aligncreative.com/img/spacer.gif" alt="" width="112" height="53" border="0"></td>

<td width="183" valign="bottom" align="center"> <a href="#" style="text-decoration:none;">
<img src="http://aligncreative.com/img/button.gif" alt="click here" width="183" height="43" border="0">
</a></td>

<td width="208" valign="top" align="left">
<img src="http://aligncreative.com/img/spacer.gif" alt="" width="208" height="53" border="0"></td>
</tr></table>
2

I figure out my problem, in case someone is interested. I added this code and it worked.

<style media=“all” type=“text/css”>
table td {
border-collapse: collapse;
}

td img {vertical-align: bottom;}
</style>

3

I’m curious if it was firefox/Gecko where you saw the gmail etc problems? The gap under images in table cells used to be one of those quirks-mode hallmarks for Gecko. Also, I wonder if the border-collapse line can also be added inline for those email clients who can’t deal with separated css so well? Or maybe those ones didn’t have a problem in the first place.

4

The problem was in all the browsers. It also appeared in Yahoo. To resolve those issues I added a display:block to the img tag.

5

Sounds like Mysterious Gap Under Images was at play.