Extra spacing in Outlook.com and Gmail

Hi,

Our HTML email renders perfectly in Outlook 2007, but in Outlook.com and Gmail extra spacing appears between table rows (containing nested tables) - See image: http://www.ctbf.co.uk/html_emails/images/outlook.com_extra_spaces_example.jpg


Any idea why this happening?

Redferret, 3 years ago

Hi MarkC,

could you post your code and i'll take a look


Gmail app apologist
MarkC, 3 years ago

Thanks Redferret; code below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>
<style type="text/css">
td { height: 0; line-height: 18px; font-family: Arial, Helvetica, sans-serif;}
A:link {
 TEXT-DECORATION: UNDERLINE
}
A:active {
 TEXT-DECORATION: UNDERLINE
}
A:visited {
 TEXT-DECORATION: UNDERLINE
}
A:hover {
 TEXT-DECORATION: underline
}
 .ReadMsgBody { width: 100%;}
 .ExternalClass {width: 100%;}
 .ExternalClass * {line-height: 100%} 
 </style>
  </head>
<body bgcolor="#bfbfbf">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#bfbfbf">
<tbody>
 <tr>
  <td align="center" bgcolor="#bfbfbf">
   <!-- MAIN TABLE ------------->
   <table width="650" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <!-- BROWSER ROW ------------->    
    <tr>
      <td>
          <table width="650" border="0" cellspacing="0" cellpadding="0" height="55">
        <tbody>
        <tr>
          <td align="left" style="padding: 20px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 10px;color: #ffffff;">Trouble viewing this email? <a href="http://www.ctbf.co.uk/html_emails/CTBF_email2.html" target="_blank" style="text-decoration: none; color: #ffffff;">Click here</a></span></td>
        </tr>
      </tbody>
      </table>
      </td>
    </tr>
    <!-- END BROWSER ROW -------->
    <!-- HEADER ROW -------------->
      <tr>
        <td>
          <table width="650" border="0" cellspacing="0" cellpadding="0" height="220">
          <tbody>
          <tr>
            <td><a href="http://www.ctbf.co.uk" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/header3.jpg" width="650" height="220" border="0" /></a></td>
          </tr>
          </tbody>
          </table>
        </td>
      </tr>
          <tr>
              <td>
                  <table width="650" border="0" cellspacing="0" cellpadding="0">
                   <tbody>
                   <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
          </tr>
          </tbody>
      </table>
     </td>
    </tr>
    <!-- END HEADER ROW ------------>
    <!-- MAIN IMAGE ROW --------->
    <tr>
           <td>
             <table width="650" border="0" cellspacing="0" cellpadding="0" height="440">
              <tbody>
                <tr>
                 <td valign="top" width="650"><img src="http://www.ctbf.co.uk/html_emails/images/image2.jpg" width="650" height="440" /></td>
                </tr>
          </tbody>
          </table>
        </td>
      </tr>
     <tr>
          <td>
            <table width="650" border="0" cellspacing="0" cellpadding="0">
           <tbody>
                   <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
          </tr>
          </tbody>
      </table>
     </td>
    </tr><!-- END MAIN IMAGE ROW ------------->
     <!-- TEXT BLOCK ROW ---------------->
      <tr>
        <td width="650" bgcolor="#ffffff" valign="top" style="padding: 30px 50px 20px 30px;">
           <table width="570" border="0" cellspacing="0" cellpadding="0">
               <tbody>
              <tr>
                <td align="left" style="line-height: 18px;" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; line-height: 18px;"><span style="font-size: 16px; color: #35006e; font-weight: bold;">Dear Guest,</span><br><br>The Sci-Fi London Party has landed and will be taking place on June 19 at the Summer House, Honourable Artillery Company, City Road, London EC1Y 2BQ<br /><br /><a href="https://maps.google.co.uk/maps/ms?msid=206204471624175467455.0004db064ced9a6aa43ae&msa=0&ll=51.522817,-0.08744&spn=0.011055,0.01929" style="color: #35006e;">Click here for Map ></a><br /><br />Email <a href="events@ctbf.co.uk" style="color: #35006e;">events@ctbf.co.uk</a> or call 0207 437 6567 with any queries and to book your place.<br /><br />Best wishes,<br /><br /><b>Events @ CTBF</b></td>
              </tr>
              </tbody>
           </table>
          </td>
       </tr>
      <!-- END TEXT BLOCK ROW -------------->
      <!-- ONLINE ROW ------------>
      <tr>
          <td>
              <TABLE cellpadding="0" cellspacing="0" width="650">
              <tbody>
                  <tr>
                 <td bgcolor="#FFFFFF" align="right" style="padding: 0px 30px 20px 0px;"><img src="http://www.ctbf.co.uk/html_emails/images/joinusonline.png"><a href="https://twitter.com/theCTBF" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/twitter3.png" border="0" /></a><a href="https://www.facebook.com/TheCTBF" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/facebook3.png" border="0"></a></span></td>
                </tr>
               </tbody>
              </table>
              </td>
             </tr>
             <tr>
          <td>
              <TABLE cellpadding="0" cellspacing="0" width="650">
              <tbody>
                <tr>
                    <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
                </tr>
               </tbody>
            </table> 
         <td>
      </tr>
      <!-- END ONLINE ROW --------->
      <!-- FOOTER -------------->
      <tr>
          <td>
         <table width="650" border="0" cellspacing="0" cellpadding="0" height="103">
         <tbody>
          <tr>
           <td align="left" valign="top"><img src="http://www.ctbf.co.uk/html_emails/images/footer.jpg" border="0" usemap="#Image-Maps_1201304241212411" /><br /><unsubscribe><span style="color: #bfbfbf; text-decoration: none;">Unsubscribe</span></unsubscribe><br /></td>
          </tr>
         </tbody>
         </table>
       </td>
      </tr>
      <!-- END FOOTER ROW ------->
     </tbody>
   </table>
   <!-- END MAIN TABLE ---------------->  
  </td>
 </tr>
 </tbody>
</table>
<map id="_Image-Maps_1201304241212411" name="Image-Maps_1201304241212411">
<area shape="rect" coords="10,51,71,76" href="mailto:events@ctbf.co.uk" alt="Contact us" title="Contact us"    />
<area shape="rect" coords="77,51,147,76" href="mailto:events@ctbf.co.uk?subject=Please unsubscribe me" alt="Unsubscribe" title="Unsubscribe" />
<area shape="rect" coords="648,101,650,103" href="http://www.image-maps.com/index.php?aff=mapped_users_1201304241212411" alt="Image Map" title="Image Map" />
</map>
</body>
</html>
Redferret, 3 years ago

Ok, I notice that several of your tables are missing an opening <tr> tag which could be causing the problem, see if that makes any difference and we'll go from there


Gmail app apologist
MarkC, 3 years ago

Can't believe I missed those but thanks for spotting. I think I've corrected them all but the spacing error is still occurring unfortunately...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>
<style type="text/css">
td { height: 0; line-height: 18px; font-family: Arial, Helvetica, sans-serif;}
A:link {
 TEXT-DECORATION: UNDERLINE
}
A:active {
 TEXT-DECORATION: UNDERLINE
}
A:visited {
 TEXT-DECORATION: UNDERLINE
}
A:hover {
 TEXT-DECORATION: underline
}
 .ReadMsgBody { width: 100%;}
 .ExternalClass {width: 100%;}
 .ExternalClass * {line-height: 100%} 
 </style>
  
</head>
<body bgcolor="#bfbfbf">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#bfbfbf">
<tbody>
 <tr>
  <td align="center" bgcolor="#bfbfbf">
   <!-- MAIN TABLE ------------->
   <table width="650" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <!-- BROWSER ROW ------------->    
    <tr>
      <td>
          <table width="650" border="0" cellspacing="0" cellpadding="0" height="55">
        <tbody>
        <tr>
          <td align="left" style="padding: 20px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 10px;color: #ffffff;">Trouble viewing this email? <a href="http://www.ctbf.co.uk/html_emails/CTBF_email2.html" target="_blank" style="text-decoration: none; color: #ffffff;">Click here</a></span></td>
        </tr>
      </tbody>
      </table>
      </td>
    </tr>
    <!-- END BROWSER ROW -------->
    <!-- HEADER ROW -------------->
      <tr>
        <td>
          <table width="650" border="0" cellspacing="0" cellpadding="0" height="220">
          <tbody>
          <tr>
            <td><a href="http://www.ctbf.co.uk" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/header3.jpg" width="650" height="220" border="0" /></a></td>
          </tr>
          </tbody>
          </table>
        </td>
      </tr>
          <tr>
              <td>
                  <table width="650" border="0" cellspacing="0" cellpadding="0">
                   <tbody>
                  <tr>
                   <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
               </tr>
             </tbody>
             </table>
       </td>
    </tr>
    <!-- END HEADER ROW ------------>
    <!-- MAIN IMAGE ROW --------->
    <tr>
           <td>
             <table width="650" border="0" cellspacing="0" cellpadding="0" height="440">
              <tbody>
                <tr>
                 <td valign="top" width="650"><img src="http://www.ctbf.co.uk/html_emails/images/image2.jpg" width="650" height="440" /></td>
                </tr>
          </tbody>
          </table>
        </td>
      </tr>
     <tr>
          <td>
            <table width="650" border="0" cellspacing="0" cellpadding="0">
           <tbody>
               <tr>
                   <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
          </tr>
          </tbody>
      </table>
     </td>
    </tr><!-- END MAIN IMAGE ROW ------------->
     <!-- TEXT BLOCK ROW ---------------->
      <tr>
        <td width="650" bgcolor="#ffffff" valign="top" style="padding: 30px 50px 20px 30px;">
           <table width="570" border="0" cellspacing="0" cellpadding="0">
               <tbody>
              <tr>
                <td align="left" style="line-height: 18px;" valign="top"><singleline><span style="font-size: 16px; color: #35006e; font-weight: bold;">Dear Guest,</span></singleline><br><br><multiline><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; line-height: 18px;">The Sci-Fi London Party has landed and will be taking place on June 19 at the Summer House, Honourable Artillery Company, City Road, London EC1Y 2BQ<br /><br /><a href="https://maps.google.co.uk/maps/ms?msid=206204471624175467455.0004db064ced9a6aa43ae&msa=0&ll=51.522817,-0.08744&spn=0.011055,0.01929" style="color: #35006e;">Click here for Map ></a><br /><br />Email <a href="events@ctbf.co.uk" style="color: #35006e;">events@ctbf.co.uk</a> or call 0207 437 6567 with any queries and to book your place.<br /><br />Best wishes,<br /><br /><b>Events @ CTBF</b></span></multiline></td>
              </tr>
              </tbody>
           </table>
          </td>
       </tr>
      <!-- END TEXT BLOCK ROW -------------->
      <!-- ONLINE ROW ------------>
      <tr>
          <td>
              <TABLE cellpadding="0" cellspacing="0" width="650">
              <tbody>
                  <tr>
                 <td bgcolor="#FFFFFF" align="right" style="padding: 0px 30px 20px 0px;"><img src="http://www.ctbf.co.uk/html_emails/images/joinusonline.png"><a href="https://twitter.com/theCTBF" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/twitter3.png" border="0" /></a><a href="https://www.facebook.com/TheCTBF" target="_blank"><img src="http://www.ctbf.co.uk/html_emails/images/facebook3.png" border="0"></a></span></td>
                </tr>
               </tbody>
              </table>
              </td>
             </tr>
             <tr>
               <td>
                <TABLE cellpadding="0" cellspacing="0" width="650">
                <tbody>
                <tr>
                    <td height="5"><img src="http://www.ctbf.co.uk/html_emails/images/divide_b8a8c9.jpg" width="650" height="5" /></td>
                </tr>
               </tbody>
            </table> 
         <td>
      </tr>
      <!-- END ONLINE ROW --------->
      <!-- FOOTER -------------->
      <tr>
          <td>
         <table width="650" border="0" cellspacing="0" cellpadding="0" height="103">
         <tbody>
          <tr>
           <td align="left" valign="top"><img src="http://www.ctbf.co.uk/html_emails/images/footer.jpg" border="0" usemap="#Image-Maps_1201304241212411" /><br /><unsubscribe><span style="color: #bfbfbf; text-decoration: none;">Unsubscribe</span></unsubscribe><br /></td>
          </tr>
         </tbody>
         </table>
       </td>
      </tr>
      <!-- END FOOTER ROW ------->
     </tbody>
   </table>
   <!-- END MAIN TABLE ---------------->  
  </td>
 </tr>
 </tbody>
</table>
<map id="_Image-Maps_1201304241212411" name="Image-Maps_1201304241212411">
<area shape="rect" coords="10,51,71,76" href="mailto:events@ctbf.co.uk" alt="Contact us" title="Contact us"    />
<area shape="rect" coords="77,51,147,76" href="mailto:events@ctbf.co.uk?subject=Please unsubscribe me" alt="Unsubscribe" title="Unsubscribe" />
<area shape="rect" coords="648,101,650,103" href="http://www.image-maps.com/index.php?aff=mapped_users_1201304241212411" alt="Image Map" title="Image Map" />
</map>
</body>
</html>
MarkC, 3 years ago

Ok... figured it out. I had to add

style="display:block;"

to each image. I think it had something to do with having images on their own in a table cell...

TroyMcClure, 3 years ago

MarkC,

I have been trying for the last few days to get your fix to work on Outlook.com HTML emails to no avail.

Is this still a valid fix? Would you mind looking at the code to see what I am doing wrong?

I would be most appreciative!

Redferret, 3 years ago

can't believe I didn't spot this at the time but just to elaborate for you Troy, images often have added space below in several email clients and web browsers, the way to eliminate this is usually to add "display:block" to the image.


Gmail app apologist

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098