Raum unter Bilder in Outlook 2013

erscheinen

Ich habe die folgende E-Mail-Vorlage, die ich testen worden Litmus Raum unter Bilder in Outlook 2013

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
</head> 
<body style="margin: 0 !important; padding: 0 !important;"> 

<!-- HIDDEN PREHEADER TEXT --> 
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> 
    Welcome to Solemates 
</div> 

<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;"> 
    <tr> 
     <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td> 
    </tr> 
    <tr> 
     <td style="padding: 10px;"> 
      <table border="0" cellpadding="0" cellspacing="0" width="580" align="center"> 
       <tr> 
        <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top"> 
         <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" /> 
        </td> 
        <td width="200" height="320" style="padding: 0 3px;"> 
         <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> 
          <tr> 
           <td style="border:solid 4px #A2C43F; height: 320px; padding: 0 10px; text-align:center;" height="320"> 
            <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p> 
            <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p> 
            <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p> 
            <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p> 
            <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p> 
            <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p> 
           </td> 
          </tr> 
         </table> 
        </td> 
        <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top"> 
         <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td> 
    </tr> 
    <tr> 
     <td> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;"> 
       <tr> 
        <td style="text-align: center;"> 
         <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a> 
        </td> 
        <td style="text-align: center;"> 
         <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a> 
        </td> 
        <td style="text-align: center;"> 
         <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td> 
    </tr> 
    <tr> 
     <td> 
      <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;"> 
       <tr> 
        <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td> 
        <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td> 
        <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;"> 
       <tr> 
        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top"> 
         <strong>UNSUBSCRIBE</strong><br /> 
         if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe]. 
        </td> 
        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top"> 
         <strong>EMAIL DELIVERY</strong><br /> 
         We never send unsolicited emails. To receive all of our emails add [email protected] to your contacts. 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

</body> 
</html>

Aus irgendeinem Grund ich mit etwas Abstand bin immer unter der großen Bilder in der linken in Outlook 2013 erscheinen und rechte Spalten. Warum erscheint das?

Quelle

2017-03-09 geoffs3310

Versuchen Sie, die Leerzeichen zwischen den Bildern und den td-Tags zu entfernen, ich weiß, es ist nicht so gut in der IDE formatiert, aber ich habe auf verschiedenen Leerzeichen vermasseln Lasten von E-Mails hatten E-Mail-Clients. – PhilS

Danke für den Vorschlag, leider hat es nicht behoben :-( – geoffs3310

Wie wäre es mit dem Entfernen der Höhe aus den zwei Zellen, die die Bilder enthalten, werden sie sowieso auf die Größe der Bilder reduziert, und auch die Höhe aus der Tabelle entfernen wie wird das auf die Höhe der größten Zelle in ihm zusammenbrechen, funktioniert das? Zusammen mit keinen Leerraum um die Bilder :) – PhilS

hatte man ein paar andere Dinge geht hier vor, die fälschlicherweise die E-Mail-render machen.

Erstens - Zeilenhöhe entfernen: 0; von der td, die deine Bilder umgibt.

Zweitens - Ich habe auch die 2 Bilder-Boxen in einer anderen Tabelle verschachtelt, so dass sie auf der gleichen Ebene wie die Center-Box sitzen, behebt ein Problem mit dem Rand an der falschen Stelle angewendet wurde.

Problem gelöst :)

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
</head> 
<body style="margin: 0 !important; padding: 0 !important;"> 

    <!-- HIDDEN PREHEADER TEXT --> 
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> 
     Welcome to Solemates 
    </div> 

    <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;"> 
     <tr> 
      <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td> 
     </tr> 
     <tr> 
      <td style="padding: 10px;"> 
       <table border="0" cellpadding="0" cellspacing="0" width="580" align="center"> 
        <tr> 
         <td> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> 
           <tr> 
            <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top"> 
             <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" /> 
            </td> 
           </tr> 
          </table> 
         </td> 

         <td width="200" height="320" style="padding: 0 3px;"> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> 
           <tr> 
            <td style="border:solid 4px #A2C43F;height: 320px; padding: 0 10px; text-align:center;" height="320"> 
             <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p> 
             <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p> 
             <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p> 
             <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p> 
             <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p> 
             <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p> 
            </td> 
           </tr> 
          </table> 
         </td> 

         <td> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> 
           <tr> 
            <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top"> 
             <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" /> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td> 
     </tr> 
     <tr> 
      <td> 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;"> 
        <tr> 
         <td style="text-align: center;"> 
          <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a> 
         </td> 
         <td style="text-align: center;"> 
          <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a> 
         </td> 
         <td style="text-align: center;"> 
          <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td> 
     </tr> 
     <tr> 
      <td> 
       <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;"> 
        <tr> 
         <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td> 
         <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td> 
         <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;"> 
        <tr> 
         <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top"> 
          <strong>UNSUBSCRIBE</strong><br /> 
          if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe]. 
         </td> 
         <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top"> 
          <strong>EMAIL DELIVERY</strong><br /> 
          We never send unsolicited emails. To receive all of our emails add [email protected] to your contacts. 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

</body> 
</html>

Quelle

2017-03-15 11:09:02 Benr89

Raum unter Bilder in Outlook 2013

Antwort

Verwandte Themen