Zusätzlicher Zeilenbereich in Gmail/Chrome HTML E-Mail

Question

Ich habe HTML-E-Mails für Serverjahre erstellt und bin nie auf dieses Problem gestoßen.

In dem Code unten bekomme ich einen 3-Pixel-Platz am Ende der Zeile, die 7 Spalten hat. Mache ich etwas falsch oder gmail fügt für jede Zeile in der Tabelle eine Pixelspaltenbreite hinzu.

Ich erfahre das nur in gGmail bei der Verwendung von Chrome. Es geschieht nicht in einem anderen E-Mail-Client oder Browser (auch mit Google Mail)

smaple

<tr> 
     <td width="588"> 
      <table border="0" cellpadding="0" cellspacing="0" width="588" align="center"> 
       <tr> 
        <td colspan="7" width="588"><img src="imgs/header2.gif" alt="View Our Latest Newsletter" width="588" height="48" border="0" style="display: block;"></td> 
       </tr> 
         <tr width="588"> 
          <td width="85"><a href="http://www.#.com"><img src="imgs/racing_menu_racing.gif" alt="" width="85" height="18" border="0" style="display: block;"></a></td> 
          <td width="64"><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td> 
          <td width="76"><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td> 
          <td width="58"><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td> 
          <td width="82"><a href="http://#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td> 
          <td width="66"><a href="http://#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="# Racing News" width="66" height="18" border="0" style="display: block;"></a></td> 
          <td width="157"><a href="http://www.#.com"><img src="imgs/racing_menu_bwcom.gif" alt="Media" width="157" height="18" border="0" style="display: block;"></a></td> 
         </tr> 
         <tr> 
          <td colspan="7" width="588"><a href="http://www.#.com"><img src="imgs/Top-ImageRace.jpg" width="588" height="93" border="0" style="display: block;"></a></td> 
         </tr>      
      </table> 



     </td> 
    </tr> 
    <tr> 
     <td width="588"> 

      <table style="font-family: Arial,Helvetica,sans-serif; font-size:14px; color:#444;" align="center" border="0" cellpadding="5" cellspacing="0" width="588"> 
       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 1</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2" width="226"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1a</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1- Ex. Drivers tend to get all of the credit when they win a race, but as the BMW experts at # reminded...<br /><br /> 
        <a href="http://www.#.com/#-returns-to-grand-am-victory-lane-at-barber-motorsports-park.html"><strong>READ MORE 1a</strong></a> *|FACEBOOK:LIKE:http://www.#.com|*</a> 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 



       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 2</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1b</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1 - Ex, Celebrate our 3-car assault with this comfortable, distinctive, and and classy T-shirt...<br /><br /> 
        <a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><strong>READ MORE 1b</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|* 
        </td> 
       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr>  
        <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2c</td> 

       </tr> 
       <tr> 
        <td valign="top">Body Text 2 - Ex. As in any performance application, replacing squishy rubber parts with a performance piece will increase response...<br /><br /> 
        <a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><strong>READ MORE 2c</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|* 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 



       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 3</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1d</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1 - Ex. Get a sneak peek at our new # Racing website. Jam-packed with all the media...<br /><br /> 
        <a href="http://www.#.com/"><strong>READ MORE 1d</strong></a>*|FACEBOOK:LIKE:http://www.#.com|* </td> 
       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr>  
        <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2e</td> 

       </tr> 
       <tr> 
        <td valign="top"> Body Text 2 - Ex. Grassroots features James Clay's ultimate wagon, a '95 M50 turbo hauler. said "The car...<br /><br /> 
        <a href="http://grassrootsmotorsports.com/articles/war-wagons/"><strong>READ MORE 2e</strong></a>*|FACEBOOK:LIKE:http://#.com/articles/war-wagons/|* 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 


    <tr> 
     <td width="588"><a href="http://www.#.com/sponsor.html"><img src="imgs/sponsors12.jpg" width="588" height="440" border="0" style="display: block;"></a> 
     </td> 
    </tr> 
    <tr> 
     <td width="588"> 


     <table style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;color:#656565;" align="center" border="0" cellpadding="0" cellspacing="0" width="588"> 
      <tr> 
          <td><a href="http://www.#.com/"><img src="imgs/racing_menu_racing.gif" alt="# Racing" width="85" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="#.com" width="66" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://#.com/"><img src="imgs/racing_menu_bwcom.gif" alt="#.com" width="157" height="18" border="0" style="display: block;"></a></td> 
         </tr> 
      <tr> 
       <td colspan="7">&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="7" style="font-size:10px;text-align:center;"><p>&copy; 2012 <a href="http://www.#.com/"><font color="#333795">#</font></a> | | <a href="mailto:info@#.com"><font color="#333795"><u>info@#.com</u></font></a></p></td> 
      </tr> 
      <tr> 
       <td colspan="7" style="font-size:10px;text-align:center;">If you are no longer interested click <a href="*|UNSUB|*">HERE</a>. Click <a href="*|ARCHIVE|*">HERE</a> to view this email in your browser.</td> 
      </tr> 
     </table> 

     </td> 
    </tr> 
</tbody> 
</table> 
</body></html> 

Answer 1

ich eigentlich nur einem ähnlichen Fehler behoben, aber die Absatz-Tags, obwohl der Fehler auch erschien in Opera.

Meine Vermutung ist, dass die Tabellen einen zusätzlichen Speicherplatz von den Standardstile von Gmail erben. Schauen Sie sich den Element-Inspektor an (ich mag Libelle am besten), um zu sehen, ob irgendetwas eine seltsame Eigenschaft geerbt zu haben scheint, wie eine ererbte 1 em oder geerbte 2 px. Wenn dies auftritt, müssen Sie es mit einer Inline-Eigenschaft überschreiben. Beachten Sie, dass das betroffene Element möglicherweise nicht offensichtlich ist, da ich Margin-Top und Margin-Bottom für meine Absatztags festlegen musste, da Operas inspect-Element ein Vererbungsproblem aufnahm, während Chrome nur die Tabelle erbte, obwohl meine Tabellen hatte cellspacing auf 0 gesetzt, genau wie du.

Hoffnung, dass jemand hilft heraus

Answer 2

Es geschieht in der Regel mit mir unter dem Image-Tag. Add "Anzeige: Block;" zu den Bildern und das sollte funktionieren.