L'espace sous les images apparaissant dans les perspectives 2013

J'ai le modèle e-mail suivante que j'ai été testé à l'aide Litmus L'espace sous les images apparaissant dans les perspectives 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>

Pour une raison quelconque, je reçois un certain espacement apparaissant dans Outlook 2013 ci-dessous les grandes images à gauche et colonnes de droite. Pourquoi cela apparaît-il?

Source

2017-03-09 geoffs3310

Essayez de supprimer les espaces entre les images et les balises td, je sais que ce n'est pas aussi bien formaté dans votre IDE, mais je l'ai eu des charges de mess blancs d'emails sur les différents clients de messagerie. – PhilS

Merci pour la suggestion, malheureusement, il ne l'a pas réparé :-( – geoffs3310

Que diriez-vous de supprimer la hauteur des deux cellules contenant les images, ils vont tout de même réduire la taille des images, et aussi enlever la hauteur de la table comme ça va s'effondrer à la hauteur de la plus grande cellule, cela fonctionne-t-il? Sans espace blanc autour des images :) – PhilS

vous aviez quelques différentes choses qui se passent ici qui faisait l'e-mail un mauvais rendu.

Premièrement - enlever la hauteur de ligne: 0; du td entourant vos images. Deuxièmement, j'ai également imbriqué les deux boîtes d'images dans une autre table afin qu'elles soient au même niveau que la boîte centrale, cela corrige un problème que vous avez eu avec la bordure appliquée au mauvais endroit.

Problème résolu :)

<!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>

Source

2017-03-15 11:09:02 Benr89

L'espace sous les images apparaissant dans les perspectives 2013

Répondre

Questions connexes