Adjust HTML E-mail To Render The Same in Different Clients - css

Question

I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:

Answer 1

Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com