Abstand in E-Mail

Ich habe eine Web-Version, die gut angezeigt wird. Wenn ich eine Test-E-Mail sende, werden unerwünschte Abstände zwischen den Bildern angezeigt. Ich habe versucht, die Polsterung und den Rand zu ändern, aber nichts funktioniert. Warum macht es das?Abstand in E-Mail

https://jsfiddle.net/tantalizea/r49oqbjj/

CSS:

a, 
body, 
div, 
img, 
span, 
table, 
td, 
tr { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

a { 
    color: #231F20; 
    font-weight: bold; 
    text-decoration: none 
} 

a[href^="x-apple-data-detectors:"] { 
    color: inherit; 
    text-decoration: inherit; 
} 

area { 
    outline: none 
} 

body { 
    font: normal 100% Arial, Helvetica, sans-serif; 
    background: #FFF; 
    color: #231F20 
} 

img { 
    border: none; 
    width: 100%; 
    height: auto 
} 

.container { 
    width: 600px; 
    margin: 0 auto; 
    max-width: 600px 
} 

#preheader { 
    display: none !important; 
    visibility: hidden; 
    opacity: 0; 
    color: #FFFFFF; 
    color: transparent; 
    height: 0; 
    width: 0; 
    font-size: 0px 
} 

.desktop { 
    display: table !important; 
    margin: 0 auto !important; 
} 

tr.desktop { 
    display: table-row !important 
} 

td.desktop { 
    display: table-cell !important 
} 

img.desktop { 
    display: inline !important 
} 

.mobile { 
    display: none !important 
} 

.break { 
    display: inline !important 
} 

@media screen and (max-width: 600px) { 
    .container { 
    width: 97.5% 
    } 
    .desktop, 
    tr.desktop, 
    td.desktop, 
    img.desktop { 
    display: none !important 
    } 
    .mobile { 
    display: table !important 
    } 
    tr.mobile { 
    display: table-row !important 
    } 
    td.mobile2 { 
    display: table !important; 
    width: 100%; 
    text-align: center !important 
    } 
    td.mobile { 
    display: table-cell !important 
    } 
    .break { 
    display: none !important 
    } 
    .hidden { 
    display: none !important 
    } 
    .no-border { 
    border: none !important 
    } 
    .smaller { 
    font-size: 200% !important 
    } 
    .smaller2 { 
    font-size: 100% !important 
    } 
    .center { 
    text-align: center !important 
    } 
    .margin { 
    margin: 0 auto 
    } 
    .image { 
    width: 100px !important 
    } 
    .width-100 { 
    width: 100% !important 
    } 
}

HTML:

<body style="background:#FFF; color:#858585"> 
    <div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div> 
    <!-- /div#preheader --> 
    <div class="container" style="margin:0 auto; max-width:600px"> 
    <table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px"> 
     <tr class="bronto"> 
     <td height="20"></td> 
     </tr> 
     <tr class="bronto"> 
     <td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? <a href="%%!message_url%%" style="font:bold 100%/6mm Helvetica, Arial, sans-serif; color:#858585; text-decoration:none">Try the web version</a>.</span></td> 
     </tr> 
     <tr> 
     <td> 
      <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
      <tr> 
       <td height="20"></td> 
      </tr> 
      <tr> 
       <td> 
       <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
        <tr> 
        <td width="35" class="desktop">&nbsp;</td> 
        <td align="center"> 
         <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
         <tr> 
          <td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td> 
          <td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td> 
         </tr> 
         </table> 
        </td> 
        <td width="35" class="desktop">&nbsp;</td> 
        </tr> 
        <!--<tr class="mobile"> 

              <td class="mobile"> 

               <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile"> 

                <tr class="mobile"> 

                 <td height="20" class="mobile"></td> 

                </tr> 

                <tr class="mobile"> 

                 <td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td> 

                </tr> 

               </table> 

              </td> 

             </tr>--> 
       </table> 
       </td> 
      </tr> 
      <tr> 
       <td height="20"></td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td> 
     </tr> 
     <tr> 
     <td> 
      <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
      <tr> 
       <td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td> 
       <td align="center" valign="middle" bgcolor="#FFFFFF"> 
       <table cellpadding="0" cellspacing="20" align="center" border="0" width="100%"> 
        <tr> 
        <td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td> 
        </tr> 
        <tr> 
        <td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td> 
        </tr> 
        <tr> 
        <td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td> 
        </tr> 
        <tr> 
        <td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br /> 
                    BOOTH #613</span></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br /> 
      Orlando, Florida</span></td> 
        </tr> 
        <tr> 
        <td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td> 
        </tr> 
       </table> 
       </td> 
       <td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td> 
     </tr> 
     <tr> 
     <td align="center" valign="middle" bgcolor="#56565a"> 
      <table cellpadding="0" cellspacing="5" align="center" border="0"> 
      <tr> 
       <td bgcolor="#56565a"><a href="https://www.google.com/maps/place/9840+International+Dr,+Orlando,+FL+32819/@28.4234728,-81.4662839,17z/data=!3m1!4b1!4m5!3m4!1s0x88e77e36c55bc137:0xf5a03296c84a146e!8m2!3d28.4234728!4d-81.4640952?utm_source=directions&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:normal 75% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#FFFFFF; background:#56565a; line-height:21px; padding:5px;letter-spacing:1.5px">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">&#9658;</strong></a></td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td height="20"></td> 
     </tr> 
     <tr> 
     <td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td> 
     </tr> 
     <tr> 
     <td height="10"></td> 
     </tr> 
     <tr> 
     <td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">@</span>kravetinc</span> 
     </td> 
     </tr> 
     <tr> 
     <td height="10"></td> 
     </tr> 
     <tr> 
     <td align="center"> 
      <table cellpadding="0" cellspacing="0" align="center" border="0"> 
      <tr> 
       <td> 
       <a href="http://www.instagram.com/kravetinc?utm_source=instagram&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" /></a> 
       </td> 
       <td width="10">&nbsp;</td> 
       <td> 
       <a href="http://www.facebook.com/kravetinc?utm_source=facebook&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" /></a> 
       </td> 
       <td width="10">&nbsp;</td> 
       <td> 
       <a href="http://www.pinterest.com/kravet?utm_source=pinterest&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" /></a> 
       </td> 
       <td width="10">&nbsp;</td> 
       <td> 
       <a href="http://www.twitter.com/kravet?utm_source=twitter&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" /></a> 
       </td> 
       <td width="10">&nbsp;</td> 
       <td> 
       <a href="http://www.houzz.com/pro/kravet/kravet?utm_source=houzz&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" /></a> 
       </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td height="10"></td> 
     </tr> 
     <tr> 
     <td align="center"><a href="http://www.e-designtrade.com?utm_source=edesigntrade&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:normal 112.5% Helvetica, Arial, sans-serif; color:#858585">e-designtrade.com</a></td> 
     </tr> 
     <tr> 
     <td height="40"></td> 
     </tr> 
     <tr> 
     <td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585"><a href="http://www.kravetcontract.com?utm_source=kravetwebsite&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">KRAVET&reg; INC</a> &nbsp;|&nbsp; <a href="http://www.kravet.com/services/contact?utm_source=contact&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">CONTACT US</a> &nbsp;|&nbsp; <a href="http://www.kravet.com/about%20us/privacy%20policy?utm_source=privacy&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">PRIVACY POLICY</a></span></td> 
     </tr> 
     <tr> 
     <td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td> 
     </tr> 
     <tr> 
     <td height="40"></td> 
     </tr> 
     <tr class="bronto"> 
     <td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td> 
     </tr> 
     <tr class="bronto"> 
     <td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td> 
     </tr> 
     <tr class="bronto"> 
     <td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585"><a href="%%!forward_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Forward to a friend</a> | <a href="%%!manage_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Manage Preferences</a> | <a href="%%!unsubscribe_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Unsubscribe</a></span></td> 
     </tr> 
     <tr> 
     <td height="40"></td> 
     </tr> 
    </table> 
    <!-- /table.container --> 
    </div> 
    <!-- /div.container --> 
</body>

Quelle

2017-02-14 Tantalizea

Vielleicht auch ein Bild von dem, was Sie sehen, wenn Sie die E-Mail senden. Möglicherweise benötigen Sie ein wenig mehr Kontext, um bei der Fehlerbehebung zu helfen. – matt

Bild hinzugefügt. Wie es aussehen sollte ist, als wäre es ein Bild. – Tantalizea

Verwenden Sie den Anzeigeblock für alle Bilder.

style="display:block;"

Dies ist ein Muss für alle Bilder.

Prost

Quelle

2017-02-15 00:36:40 Syfer

Eine andere Person hat mir das gesagt und es hat das Problem gelöst. Danke für die Hilfe, alle! – Tantalizea

Um ganz ehrlich zu sein, ich liebe wirklich so, wie es haha aussieht.

Aber ich glaube, Ihr Problem ist die img. Es basiert auf der Breite. Das Seitenverhältnis macht die Höhe kleiner als die Größe der Tabellenzeile. Dies ist wahrscheinlich nicht der beste Weg, um es zu beheben, aber nach einer Reihe von css Änderungen konnte ich es nicht anders funktionieren:

Auf den spezifischen Bildern. Stellen Sie den img Stil 4 Pixel nach unten verschoben werden:

transform: translateY(4px);

Bild unten, 4 Pixel bis:

transform: translateY(-4px);

Ex: Unten:

<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">

Sollte aussehen so:

Quelle

2017-02-14 17:03:36 matt

Tolle Idee! Ich habe es versucht, aber es vermasselt die normale Ansicht und immer noch nicht auf dem Test senden. Es ist so frustrierend! – Tantalizea

@Tantalizea Ich habe versucht, mit etwas mehr CSS zu experimentieren, konnte aber keine Lösung finden. Definitiv ein herausforderndes Problem! – matt

Abstand in E-Mail

Antwort

Verwandte Themen