Outlook 2013 only image gap in HTML email

Question

I'm having an issue with my HTML email in Outlook 2013 only, it looks great in previous versions including 2007 and 2010.

I've added style="display:block; My table and td have a black background color. I tried specifying width and height on the td and the img and a line-height style as suggested on a previous post here for the containing td.

Here's the code:

<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>

Containing code:

<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
            <tbody>
                <tr>
                    <td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
                    <table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix&rsquo;s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for &ldquo;Find and Fix Faster – Your Path to More Profits,&rdquo; Identifix&rsquo;s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry &ldquo;G&rdquo; Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
                    <span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Diagnose and repair vehicles faster</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Reduce non-billable work time</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Boost customer trust and satisfaction</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Increase tech confidence and productivity</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Stay profitable</b></span><br><br>
                    Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 &ndash; 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>&reg;</sup>.<br>
                    <br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
                </tr>
                <tr>
                    <td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
                </tr>
                <tr>
                    <td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
                    &#169;2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
                </tr>
            </tbody>
        </table>

Any suggestions appreciated. Thanks,

Douglas, I tried to add an image but it says I need at least 10 reputation to post it, and I only have 1 now. The link to it is this http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG

In litmus tests only on Outlook 2013 a strange white, not even aligned gap, to the right of the image that is not supposed to be there appears.

Answer 1

Following worked for me :

<td style="line-height:0px; mso-line-height-rule:exactly;">

Answer 2

Is this problem specific to Microsoft e-mail clients? How does the e-mail look on web clients?

I have had a wide range of problems with 2013 and sometimes 2007. These are usually remedied by using the clandestine mso-specific css rules.

For example; using mso-line-height-rule:exactly; in inline css will resolve the particularly aggravating problem of Outlook 2013 pushing all tds < 15px out.

It is hard to isolate the problem within your code without seeing the rest of the code.

Answer 3

You should try not to use colspans to make it work in all clients like lotus notes 6.5 and 7