web-dev-qa-db-fra.com

le rembourrage CSS ne fonctionne pas dans Outlook

J'ai HTML suivant dans le modèle d'email.

J'obtiens une vue différente dans MS Outlook et dans Gmail pour la même chose.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

In gmail

In Outlook

Comment régler ceci?

htmlcssemailoutlookoutlook-2010
39
Muk

J'ai changé pour suivre et cela a fonctionné pour moi

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

Mise à jour basée sur la demande de Bsalex, ce qui a réellement changé. J'ai remplacé la balise span

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

avec les balises table et td comme suit 

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>
14
Muk

Malheureusement, Outlook est votre pire ennemi en matière de GED. Certaines versions ne respectent pas le remplissage lorsque le contenu d'une cellule dicte les dimensions de la cellule.

L’approche qui vous donnera le meilleur résultat cohérent sur tous les clients de messagerie consiste à utiliser des cellules de tableau vides comme remplissage (je sais, l’horreur), mais n'oubliez pas de remplir ces tableaux avec une image vide des dimensions souhaitées vous l'avez deviné, certaines versions d'Outlook ne respectent pas les déclarations hauteur/largeur des cellules vides.

Les EDM ne sont-ils pas amusants? (Non ils ne sont pas.)

44
monners

Pour créer du HTML dans un modèle de courrier électronique qui est emailer/newsletter, padding/margin ne prend pas en charge les clients de messagerie. Vous pouvez prendre une taille 1x1 d’image vierge gif et l’utiliser.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>
7
Rahul J. Rane

Juste utiliser
<Table cellpadding="10" ..> ... </Table>
N'utilisez pas px.Works dans MS-Outlook. 

6
Raj_89

J'ai eu le même problème et j'ai fini par utiliser border au lieu de padding.

4
Jacob

Faites ceci à la place:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

Il est préférable d’utiliser deux cellules et d’aligner le contenu plutôt que d’utiliser un grand padding et des &nbsp;.

3
John

Le rembourrage ne fonctionnera pas dans Outlook . Au lieu d’ajouter une image vierge, vous pouvez simplement utiliser plusieurs espaces (& nbsp;) avant les éléments/textes pour le rembourrage à gauche. un div contenant seulement des espaces (& nbsp;) seul . Cela fonctionnera !!!

3
Subbu

Après avoir effectué de nombreux tests dans Litmus, je ne pouvais pas trouver un moyen d’obtenir un rendu parfait dans tous les lecteurs de courrier électronique, mais voici la meilleure solution que j’ai trouvée:

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

Dans ce morceau de code, je souhaitais émuler padding: 6px 12px;

Il y a 2 "colonnes de table 12px" qui gèrent le remplissage droit et gauche.

Et j'utilise "padding: 6px 0;" sur mon contenu td, pour gérer le remplissage en haut et en bas: Outlook 2010 et 2013 l'ignoreront et utiliseront leur propre remplissage.

Le texte ne sera pas parfaitement aligné dans Outlook 2010 et Outlook 2013 (légèrement trop éloigné du haut), mais il fonctionne avec tous les autres lecteurs de courrier électronique que j'ai essayés: Apple Mail, Gmail, Outlook 2011 (oui ..), Hotmail, Yahoo et bien d'autres. plus.

Prévisualisation de l'image: aperçu d'Outlook 2010 et 2013

Image d'aperçu: Gmail, Apple Mail et autres

2
Fab

Ma solution consiste à utiliser un espace vide/celui qui est nécessaire avec un spacer gif transparent car le remplissage n'est pas pris en charge à 100%.

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>
0
Richard Clifford

Comme le disent les membres, certains clients de messagerie sont d’horribles problèmes de manipulation. Vous pouvez utiliser des lignes et des cellules vides comme il le suggère (avec la précaution de définir la hauteur de la ligne sur 1, sinon la hauteur de la ligne du td peut être supérieure au remplissage).

J'ai particulièrement trouvé une autre solution, en utilisant des bordures de même couleur que l'arrière-plan. J'ai testé cette solution de manière positive dans Gmail (et Gmail pour les entreprises), Yahoo Mail, Outlook Web, le bureau Outlook, Thunderbird et fonctionne correctement.

Exemple:

<table>
    <tr>
        <!--use border same color of bg-->
        <td style="border: solid 10px #ffffff">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--Same result with padding-->
<table>
    <tr>
        <!--use paddings-->
        <td style="padding: 10px 10px 10px 10px">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--using empty td/tr-->
<table>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td width="10" style="width: 10px; line-height: 1px"></td>
        <td>
           <!--Content goes here-->
        </td>
        <td width="10" style="width: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
</table>

En outre, voici un excellent guide pour créer des newsletters réactives SANS mediaqueries. J'utilise ce guide depuis longtemps et il est excellent: https://webdesign.tutsplus.com/tutorials/creating-a- email-responsive-proof-future-proof-media-demande - cms-23919

Et vous pouvez tester tous vos emails dans: https://putsmail.com/

Et rappelez-vous toujours de rendre votre css en ligne, j'utilise: https://inliner.cm/

Enfin, si vous avez des doutes sur l’assistance css, vous pouvez vous rendre ici: https://templates.mailchimp.com/resources/email-client-css-support/

ou ici: https://www.campaignmonitor.com/css/

0
Sachi Cortes

Tous les styles, y compris le rembourrage, doivent être ajoutés à un td et non à un span.

Une autre solution consiste à placer le texte dans <p>text</p> et à définir les marges, ce qui devrait donner le remplissage requis.

Par exemple:

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>
0
Ahmed Shahin

avez-vous essayé display:inline-block;?

0
Carol McKay