I am developing an email campaign however find myself running into an issue specific to Outlook 2007/10 only. I presume this is due to the fact it uses the Word rendering engine. This code works well on a significant majority of other clients tested using Litmus.
The total width of the table is 650px, each row contains 3 images making up a total width of 650px.
Image2 http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png
This is Outlook 2010 and notice the highlighted image is exhibiting a small gap between the it and the image to the right. This image is in it’s own table cell and I have applied display: block CSS to it.
My entire codebase can be found below. This email is being sent in campaign monitor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>We've Moooved...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
HTML,BODY {
margin: 0;
padding: 0;
}
IMG {
display: block;
padding: 0;
margin: 0;
vertical-align:bottom;
}
TABLE,TR,TD {
border-collapse: collapse;
}
P {
margin: 5px 0px;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" align="center" background="images/background.jpg" bgcolor="#282828" style="padding-bottom: 20px; background-color:#282828; width: 100%">
<tr>
<td style="color: #FFFFFF; text-align: center; padding: 10px;" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 12px; line-height: 20px;">
Having trouble viewing this email? <webversion style="color:#FFFFFF">Click here to view it in your browser</webversion>
</font>
</td>
</tr>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="margin: 0 auto; text-align: center; background-color: #000" bgcolor="#000">
<tr>
<td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="84" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="75" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="9" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="83" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="68" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="10"><a href="http://www.hallwaystudios.com/"><span></span><img name="campaign_r1_c1" src="images/campaign_r1_c1.png" width="416" height="110" border="0" alt="" style="display: block" /></a></td>
<td colspan="8" bgcolor="#000000"><span></span><img src="images/spacer.gif" width="1" height="39" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r2_c11" src="images/campaign_r2_c11.jpg" width="234" height="34" border="0" alt="" style="display: block" /></td>
<td><span></span><img src="images/spacer.gif" width="1" height="34" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r3_c11" src="images/campaign_r3_c11.jpg" width="234" height="37" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r4_c1" src="images/campaign_r4_c1.jpg" width="650" height="157" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td rowspan="3" align="right" width="26"><span></span><img name="campaign_r5_c1" src="images/campaign_r5_c1.jpg" width="26" height="408" border="0" alt="" style="display: block" /></td>
<td rowspan="3" colspan="10" valign="top" background="images/campaign_r5_c2.jpg" bgcolor="CEF2EE" align="left" style="background:#CEF2EE url(images/campaign_r5_c2.jpg) top left no-repeat" height="408" width="443">
<!--[if gte mso 9]>
<v:rect style="width:443px;height:408px;" strokecolor="none">
<v:fill type="tile" color="#CEF2EE" src="http://www.hallwaystudios.com/images/email/campaign_r5_c2.jpg" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:443px;height:408px;">
<![endif]-->
<font color="#000000" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 14px; line-height: 20px; text-align: left;"><multiline><p style="margin: 0px 0px 6px">Thanks to all of your support, our team has thrived and grown<br>We looked far and wide to find a space, that we can call our own</p> <p style="margin:6px 0px">We love our new office; it’s so easy to reach<br>It’s down the road in Watford (sadly not the beach)<br>Near the station, M1 and M25, we’re very well connected<br>Of course we miss the countryside, but nothing else has been affected</p><p style="margin:6px 0px">We still do great <a href="http://www.hallwaystudios.com/services/" style="color: #000000"><strong><font color="#000000">design</font></strong></a>, be it web, literature, brand or logo,<br>And know how to <a href="http://www.hallwaystudios.com/services/" style="color:#c92234"><font color="#c92234"><strong>promote</strong></font></a> your business through social media, email and SEO.<br>We <a href="http://www.hallwaystudios.com/services/" style="color:#1f75b0"><font color="#1f75b0"><strong>develop</strong></font></a> the technology: e-commerce, web or bespoke software<br>And we make sure you’re involved at every stage to create results beyond compare.</p><p style="margin:6px 0px">So make sure you come and visit, for a coffee and some cake<br>We'd be delighted to show you round, and love an excuse to bake!</p><p style="margin: 6px 0px 0px">To get your free cake and coffee, call us or click on the button to the right<br>And arrange to see us and Betty the cow, (she heard we had moo-ved and appeared one night...)</p></multiline></font>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
<td colspan="7" align="left"><img name="campaign_r5_c12" src="images/campaign_r5_c12.jpg" width="181" height="163" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="3" align="left"><img name="campaign_r6_c12" src="images/campaign_r6_c12.jpg" width="64" height="51" border="0" alt=""></td>
<td align="left"><a href="http://www.hallwaystudios.com/contact/"><img name="campaign_r6_c15" src="images/campaign_r6_c15.jpg" width="68" height="51" border="0" alt="" style="display: block" /></a></td>
<td colspan="3" align="left"><img name="campaign_r6_c16" src="images/campaign_r6_c16.jpg" width="49" height="51" border="0" alt="" style="display: block" /></td>
<tr>
<td colspan="7" align="left"><img name="campaign_r7_c12" src="images/campaign_r7_c12.jpg" width="181" height="194" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><img name="campaign_r8_c1" src="images/campaign_r8_c1.jpg" width="650" height="98" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r9_c1" src="images/campaign_r9_c1.jpg" width="650" height="178" border="0" alt="" style="display: block" /></td>
</tr>
<tr width="650">
<td align="right"><img name="campaign_r10_c1" src="images/campaign_r10_c1.jpg" width="26" height="96" border="0" alt="" style="display: block" /><span></span></td>
<td colspan="4" align="right"><a href="http://www.hallwaystudios.com/contact/#map"><span></span><img name="campaign_r10_c2" src="images/campaign_r10_c2.jpg" width="203" height="96" border="0" alt="" style="display: block" /></a></td>
<td colspan="13" align="left"><span></span><img name="campaign_r10_c6" src="images/campaign_r10_c6.jpg" width="421" height="96" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r11_c1" src="images/campaign_r11_c1.jpg" width="650" height="145" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000"><img src="images/social_footer.jpg" usemap="#Map" border="0" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2">
Censored</font></p>
<p><small>
Would you like to <preferences style="color:#FFFFFF">
<font color="#FFFFFF">update your details</font></preferences>? Or <unsubscribe style="color:#FFFFFF"><font color="#FFFFFF">unsubscribe from our awesome email list</font></unsubscribe> (Betty will miss you)?
</small></p>
</font>
</td>
</tr>
</table>
</td></tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="31,2,112,67" href="http://www.facebook.com/hallwaystudios" target="_blank" alt="Facebook" />
<area shape="rect" coords="279,1,362,70" href="http://www.linkedin.com/company/hallway-studios-limited" target="_blank" alt="LinkedIn" />
<area shape="rect" coords="404,2,486,81" href="http://www.hallwaystudios.com/" target="_blank" alt="Hallway Studios" />
<area shape="rect" coords="526,-9,622,77" href="[forwardtoafriend]" />
<area shape="rect" coords="155,-2,237,67" href="http://twitter.com/hallwaystudios" target="_blank" alt="Twitter" />
</map>
</body>
</html>
Any ideas would be appreciated!
I think I’ve finally cracked this problem that has plagued me for a couple of days. It may not apply to you, I can’t read code very well, but the problem for me was I had what I’m going to call offset columns. If your table columns line up nicely, Outlook treats them fine, as pictured below:
If you have any offset columns, it starts having problems, and you end up with those phantom spaces in places that don’t make sense. This is a bad way to do it:
As best I can tell, you’re better off creating more columns than you actually need, because if you economize and create tables in a logical, economical manner, you’ll have problems. This has solved my problem, hope it solves yours.