1

Upgraded to Office 2013. Trying to send out a graphic email in Outlook 2013, and have run into an error of overlapping image slices. The emails appear condensed when viewing in 2013 and overlap causing images or text to be cut off.

I’ve sent tests to private Yahoo, Gmail, and Hotmail accounts and have not seen any issues, and older versions of Outlook still show the templates just fine.

Here is an external screenshot of the issue as displayed in the middle and bottom sections: https://i.stack.imgur.com/Xzl4X.jpg

This is happening with every graphic email we are trying to send. I'm hoping someone has run into this exact issue before. Here is the code i'm using for one of the templates: 

<html><style>img{display:block}</style> 
 <head>
     <title>AffHousAug2014Seminars---Final</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     <!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
     <table id="Table_01" width="620" height="658" border="0" cellpadding="0" cellspacing="0">
         <tbody>
             <tr>
                 <td colspan="2">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
             </tr>
             <tr>
                 <td colspan="2">
                 <a href="http://taa.org/" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
             <tr>
                 <td style="line-height: 0">
                 <a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                 <td style="line-height: 0">
                 <a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
             <tr>
                 <td colspan="2">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
             </tr>
             <tr>
                 <td style="line-height: 0">
                 <a href="mailto:education@taa.org" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                 <td style="line-height: 0">
                 <a href="http://taa.org/" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
         </tbody>
     </table>
     <!-- End Save for Web Slices -->
 </body>

user3821488
  • 11
  • 2

1 Answers1

3

You have a line-height applied on the td's where it is an issue. I think its to do with that. Whilst you do need to set style="line-height:0px; font-size:0px;" on the containing td to fix some issues with outlook 2013, that only applies to images that are smaller than 30px in height. In this case it is unnecessary and is causing your td to chop off your images.

I have edited your code below to make it a bit more email compliant. This should fix a few other issues that you are likely to encounter.

For one, you shouldn't use colspan/rowspan as this causes rendering issues in older browsers. You should use nested tables instead, as I have done in the code below.

Also, to over-ride browser alignment settings, its advisable to add alignment and vertical alignment to all your td's. Again, that's in the code below.

It would be better to do all this a live copy and background colours where possible, to maximize your user engagement, but that is a decision for you to make ;)

I also added some generic css fixes to your head, that should sort out a few issues with outlook online and yahoo.

Hope this is helpful.

    <html>
     <head>
         <title>AffHousAug2014Seminars---Final</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
        .ReadMsgBody, .ExternalClass { width: 100%;}
        .ExternalClass * { line-height: 110%; }
        body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
        table { border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        img{ display:block; }
    -->
    </style>

     </head>
     <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
         <!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tbody>
             <tr>
               <td align="center" valign="top"><table id="Table_01" width="620" border="0" cellpadding="0" cellspacing="0">
                 <tbody>
                   <tr>
                     <td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><a href="http://taa.org/" target="_blank"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table_">
                       <tbody>
                         <tr>
                           <td align="left" valign="top"><a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                           <td align="left" valign="top"><a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                         </tr>
                       </tbody>
                     </table></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><table width="100%" border="0" cellpadding="0"  cellspacing="0">
                       <tbody>
                         <tr>
                           <td align="left" valign="top"><a href="mailto:education@taa.org" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                           <td align="left" valign="top"><a href="http://taa.org/" target="_blank"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                         </tr>
                       </tbody>
                     </table></td>
                   </tr>
                 </tbody>
               </table></td>
             </tr>
           </tbody>
         </table>
         <!-- End Save for Web Slices -->
     </body>
DoubleA
  • 1,636
  • 14
  • 28
  • Thank you kind stranger. This seems to have resolved my issue. I appreciate your time! :) – user3821488 Jul 09 '14 at 21:13
  • +1 It was the line-height on the `` containing the image which made my image ignore the vertical padding of the `` above it and overlap. – dotcomly Nov 06 '16 at 02:12