Databases
StackOverflow2013
Postsdbo
POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
    primarykey
    data
    text
    <p>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.</p> <p>The total width of the table is 650px, each row contains 3 images making up a total width of 650px.</p> <p><a href="http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png" rel="nofollow noreferrer">Image2 http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png</a></p> <p>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.</p> <p>My entire codebase can be found below. This email is being sent in campaign monitor.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;title&gt;We've Moooved...&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;/head&gt; &lt;body bgcolor="#ffffff"&gt; &lt;table width="100%" cellpadding="0" cellspacing="0" align="center" background="images/background.jpg" bgcolor="#282828" style="padding-bottom: 20px; background-color:#282828; width: 100%"&gt; &lt;tr&gt; &lt;td style="color: #FFFFFF; text-align: center; padding: 10px;" align="center"&gt; &lt;font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 12px; line-height: 20px;"&gt; Having trouble viewing this email? &lt;webversion style="color:#FFFFFF"&gt;Click here to view it in your browser&lt;/webversion&gt; &lt;/font&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt; &lt;table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="margin: 0 auto; text-align: center; background-color: #000" bgcolor="#000"&gt; &lt;tr&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="26" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="3" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="84" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="41" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="75" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="9" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="40" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="83" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="42" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="13" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="53" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="18" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="40" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="6" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="68" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="19" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="29" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="images/spacer.gif" width="1" height="1" border="0" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="3" colspan="10"&gt;&lt;a href="http://www.hallwaystudios.com/"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r1_c1" src="images/campaign_r1_c1.png" width="416" height="110" border="0" alt="" style="display: block" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;td colspan="8" bgcolor="#000000"&gt;&lt;span&gt;&lt;/span&gt;&lt;img src="images/spacer.gif" width="1" height="39" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="8"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r2_c11" src="images/campaign_r2_c11.jpg" width="234" height="34" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;td&gt;&lt;span&gt;&lt;/span&gt;&lt;img src="images/spacer.gif" width="1" height="34" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="8"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r3_c11" src="images/campaign_r3_c11.jpg" width="234" height="37" border="0" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r4_c1" src="images/campaign_r4_c1.jpg" width="650" height="157" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="3" align="right" width="26"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r5_c1" src="images/campaign_r5_c1.jpg" width="26" height="408" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;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"&gt; &lt;!--[if gte mso 9]&gt; &lt;v:rect style="width:443px;height:408px;" strokecolor="none"&gt; &lt;v:fill type="tile" color="#CEF2EE" src="http://www.hallwaystudios.com/images/email/campaign_r5_c2.jpg" /&gt;&lt;/v:fill&gt; &lt;/v:rect&gt; &lt;v:shape id="theText" style="position:absolute;width:443px;height:408px;"&gt; &lt;![endif]--&gt; &lt;font color="#000000" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 14px; line-height: 20px; text-align: left;"&gt;&lt;multiline&gt;&lt;p style="margin: 0px 0px 6px"&gt;Thanks to all of your support, our team has thrived and grown&lt;br&gt;We looked far and wide to find a space, that we can call our own&lt;/p&gt; &lt;p style="margin:6px 0px"&gt;We love our new office; it’s so easy to reach&lt;br&gt;It’s down the road in Watford (sadly not the beach)&lt;br&gt;Near the station, M1 and M25, we’re very well connected&lt;br&gt;Of course we miss the countryside, but nothing else has been affected&lt;/p&gt;&lt;p style="margin:6px 0px"&gt;We still do great &lt;a href="http://www.hallwaystudios.com/services/" style="color: #000000"&gt;&lt;strong&gt;&lt;font color="#000000"&gt;design&lt;/font&gt;&lt;/strong&gt;&lt;/a&gt;, be it web, literature, brand or logo,&lt;br&gt;And know how to &lt;a href="http://www.hallwaystudios.com/services/" style="color:#c92234"&gt;&lt;font color="#c92234"&gt;&lt;strong&gt;promote&lt;/strong&gt;&lt;/font&gt;&lt;/a&gt; your business through social media, email and SEO.&lt;br&gt;We &lt;a href="http://www.hallwaystudios.com/services/" style="color:#1f75b0"&gt;&lt;font color="#1f75b0"&gt;&lt;strong&gt;develop&lt;/strong&gt;&lt;/font&gt;&lt;/a&gt; the technology: e-commerce, web or bespoke software&lt;br&gt;And we make sure you’re involved at every stage to create results beyond compare.&lt;/p&gt;&lt;p style="margin:6px 0px"&gt;So make sure you come and visit, for a coffee and some cake&lt;br&gt;We'd be delighted to show you round, and love an excuse to bake!&lt;/p&gt;&lt;p style="margin: 6px 0px 0px"&gt;To get your free cake and coffee, call us or click on the button to the right&lt;br&gt;And arrange to see us and Betty the cow, (she heard we had moo-ved and appeared one night...)&lt;/p&gt;&lt;/multiline&gt;&lt;/font&gt; &lt;!--[if gte mso 9]&gt; &lt;/v:shape&gt; &lt;![endif]--&gt; &lt;/td&gt; &lt;td colspan="7" align="left"&gt;&lt;img name="campaign_r5_c12" src="images/campaign_r5_c12.jpg" width="181" height="163" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3" align="left"&gt;&lt;img name="campaign_r6_c12" src="images/campaign_r6_c12.jpg" width="64" height="51" border="0" alt=""&gt;&lt;/td&gt; &lt;td align="left"&gt;&lt;a href="http://www.hallwaystudios.com/contact/"&gt;&lt;img name="campaign_r6_c15" src="images/campaign_r6_c15.jpg" width="68" height="51" border="0" alt="" style="display: block" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;td colspan="3" align="left"&gt;&lt;img name="campaign_r6_c16" src="images/campaign_r6_c16.jpg" width="49" height="51" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;tr&gt; &lt;td colspan="7" align="left"&gt;&lt;img name="campaign_r7_c12" src="images/campaign_r7_c12.jpg" width="181" height="194" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18"&gt;&lt;img name="campaign_r8_c1" src="images/campaign_r8_c1.jpg" width="650" height="98" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r9_c1" src="images/campaign_r9_c1.jpg" width="650" height="178" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr width="650"&gt; &lt;td align="right"&gt;&lt;img name="campaign_r10_c1" src="images/campaign_r10_c1.jpg" width="26" height="96" border="0" alt="" style="display: block" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt; &lt;td colspan="4" align="right"&gt;&lt;a href="http://www.hallwaystudios.com/contact/#map"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r10_c2" src="images/campaign_r10_c2.jpg" width="203" height="96" border="0" alt="" style="display: block" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;td colspan="13" align="left"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r10_c6" src="images/campaign_r10_c6.jpg" width="421" height="96" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18"&gt;&lt;span&gt;&lt;/span&gt;&lt;img name="campaign_r11_c1" src="images/campaign_r11_c1.jpg" width="650" height="145" border="0" alt="" style="display: block" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18" bgcolor="#000000"&gt;&lt;img src="images/social_footer.jpg" usemap="#Map" border="0" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="18" bgcolor="#000000" align="center"&gt; &lt;font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2"&gt; Censored&lt;/font&gt;&lt;/p&gt; &lt;p&gt;&lt;small&gt; Would you like to &lt;preferences style="color:#FFFFFF"&gt; &lt;font color="#FFFFFF"&gt;update your details&lt;/font&gt;&lt;/preferences&gt;? Or &lt;unsubscribe style="color:#FFFFFF"&gt;&lt;font color="#FFFFFF"&gt;unsubscribe from our awesome email list&lt;/font&gt;&lt;/unsubscribe&gt; (Betty will miss you)? &lt;/small&gt;&lt;/p&gt; &lt;/font&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;map name="Map" id="Map"&gt; &lt;area shape="rect" coords="31,2,112,67" href="http://www.facebook.com/hallwaystudios" target="_blank" alt="Facebook" /&gt; &lt;area shape="rect" coords="279,1,362,70" href="http://www.linkedin.com/company/hallway-studios-limited" target="_blank" alt="LinkedIn" /&gt; &lt;area shape="rect" coords="404,2,486,81" href="http://www.hallwaystudios.com/" target="_blank" alt="Hallway Studios" /&gt; &lt;area shape="rect" coords="526,-9,622,77" href="[forwardtoafriend]" /&gt; &lt;area shape="rect" coords="155,-2,237,67" href="http://twitter.com/hallwaystudios" target="_blank" alt="Twitter" /&gt; &lt;/map&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Any ideas would be appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChris
    1. USChris
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPossible duplicate of http://stackoverflow.com/questions/11117950/removing-white-spacing-between-images-in-a-table/11118089#11118089
      singulars
      1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
      1. USAnkit
    2. CO@Ankit If it was I wouldn't have posted it, the other subject has not been resolved either
      singulars
      1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
      1. USChris
    3. CO@Chris I'm having this exact problem now as well, exactly. I'll let you know if I figure it out.
      singulars
      1. POHTML Email Displaying incorrectly Outlook 2007/10, additional space between images
      1. USHairgami_Master
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload