HTML-E-Mail-Auffüllung über Tabelle Outlook 2010

Question

Ich versuche, eine etwas komplexe HTML-E-Mail zu erstellen, und ich habe Probleme mit der Auffüllung.

Ich habe eine Tabelle mit drei Zellen. Die erste Zelle ist eine Abstandszelle auf der linken Seite. Die zweite Zelle enthält eine Tabelle, in der der Text enthalten ist. Die dritte Zelle hat eine CTA-Schaltfläche (Bild).

Die mittlere Zelle hat zusätzliche Polsterung oben und ich kann nicht herausfinden, woher es kommt.

Mein Ziel ist 4px Polsterung oben auf der mittleren Zelle und 8px oben auf der rechten Zelle zu haben. Auf diese Weise wird die Grenze am unteren Ende des Header-Textes in der mittleren Zelle ("Random Copy in Cell") mit der CTA-Schaltfläche in der rechten Zelle ausgerichtet.

Wenn ich in Outlook 2010 und Google Mail IOS-App testen, scheint es, als ob es zusätzliche Polsterung über der mittleren Zelle (es scheint doppelt so viel der eingerückten Auffüllung).

<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
         <tr> 
          <td width="142"></td> 
          <td width="310" style="padding: 0;"> 
           <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpading="0"> 
            <tr> 
             <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;"> 
               Random Copy In Cell 
             </td> 
            </tr> 
            <tr> 
             <td> 
              <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
               <tr> 
                <!-- Model Specs --> 
                <td style="padding-bottom: 2px; padding-top: 4px"> 
                 <p style="font-size: 11px; margin-bottom: 0;"> 
                  <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span> 
                 </p> 
                </td> 
               </tr> 
               <tr> 
                <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;"> 
                 <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
                  - The first selling point 
                  <br /> - The second selling point 
                  <br /> - The third sell point/ 
                  <br />&nbsp;&nbsp;The fourth selling point 
                  <br /> - Selling point 
                 </p> 
                </td> 
                <!-- Model Specs --> 
               </tr> 
              </table> 
             </td> 
             <td> 
              <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
               <tr> 
                <!-- Model Specs --> 
                <td style="padding-bottom: 0px; padding-top: 4px;"> 
                 <p style="font-size: 11px; margin-bottom: 0;"> 
                  <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span> 
                  <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
                  <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span> 
                  <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span> 
                  <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span> 
                  <br /> 
                  <br /> 
                  <br /> 
                  <br /> 
                 </p> 
                </td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </td>         
          <td width="125" valign="top" style="padding-top: 8px;"> 
           <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
          </td> 
         </tr></table> 

Answer 1

Es ist die style="padding-top: 8px;" im letzten <td>, die das Problem verursacht. Ändern sie diese löst das Problem in Outlook 2007.10.13 und Gmail:

 <td width="125" valign="top"> 
      <table cellspacing="0" cellpadding="0" border="0"> 
       <tr> 
        <td style="padding-top: 8px;"> 
         <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
        </td> 
       </tr> 
      </table> 
     </td> 

nicht sicher, was der Code, den Sie außerhalb Ihres Schnipsel, aber ein paar CSS-Resets im <head> Hinzufügen helfen diese in beschuss des Weiteren. Ich habe einige zu Ihrem Beispiel, hier ist der Code in seiner Gesamtheit:

<!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> 
 
    <style> 
 
     /* What it does: Remove spaces around the email design added by some email clients. */ 
 
     /* Beware: It can remove the padding/margin and add a background color to the compose a reply window. */ 
 
     html, 
 
     body { 
 
      margin: 0 auto !important; 
 
      padding: 0 !important; 
 
      height: 100% !important; 
 
      width: 100% !important; 
 
     } 
 
     /* What it does: Stops Outlook from adding extra spacing to tables. */ 
 
     table, 
 
     td { 
 
      mso-table-lspace: 0pt !important; 
 
      mso-table-rspace: 0pt !important; 
 
     } 
 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
 
     table { 
 
      border-spacing: 0 !important; 
 
      border-collapse: collapse !important; 
 
      table-layout: fixed !important; 
 
      margin: 0 auto !important; 
 
     } 
 
     table table table { 
 
      table-layout: auto; 
 
     } 
 
    </style> 
 
</head> 
 
    
 
<body width="100%" style="margin: 0;"> 
 
\t <table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
      <td width="142" style="line-height: 0; font-size: 0;">&nbsp;</td> 
 
      <td width="310" valign="top" bgcolor="red"> 
 
       <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
 
        <tr> 
 
         <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;"> 
 
           Random Copy In Cell 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
 
           <tr> 
 
            <!-- Model Specs --> 
 
            <td style="padding-bottom: 2px; padding-top: 4px"> 
 
             <p style="font-size: 11px; margin-bottom: 0;"> 
 
              <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span> 
 
             </p> 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;"> 
 
             <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
 
              - The first selling point 
 
              <br /> - The second selling point 
 
              <br /> - The third sell point/ 
 
              <br />&nbsp;&nbsp;The fourth selling point 
 
              <br /> - Selling point 
 
             </p> 
 
            </td> 
 
            <!-- Model Specs --> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td> 
 
          <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
 
           <tr> 
 
            <!-- Model Specs --> 
 
            <td style="padding-bottom: 0px; padding-top: 4px;"> 
 
             <p style="font-size: 11px; margin-bottom: 0;"> 
 
              <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span> 
 
              <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
 
              <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span> 
 
              <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span> 
 
              <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span> 
 
              <br /> 
 
              <br /> 
 
              <br /> 
 
              <br /> 
 
             </p> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td>         
 
      <td width="125" valign="top"> 
 
       \t <table cellspacing="0" cellpadding="0" border="0"> 
 
        <tr> 
 
        \t <td style="padding-top: 8px;"> 
 
        \t \t <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
 
        \t </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>