web-dev-qa-db-fra.com

Comment aligner verticalement des modèles d'e-mail client-image / texte

<table cellspacing="0" cellpadding="0" border="0">
 <tbody>
   <tr>
     <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td>
     <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
 </tbody>
</table>

J'ai le code ci-dessus dans Outlook. Il s'affiche correctement mais dans Gmail, Yahoo et Hotmail, les puces et le texte ne s'alignent pas verticalement sur le dessus, il semble qu'il y ait un rembourrage en haut du texte. Des idées?

htmlcsshtml-email
21
user1417094

Pour faire court, dans les tests que j'ai faits cet après-midi, il semble qu'Outlook prend en charge la propriété valign sur les éléments td, mais gmail et les autres veulent la règle css d'alignement vertical. Gmail ne prend en charge que les styles en ligne, pas les balises de style, vous devez donc faire quelque chose comme ceci:

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

Assurez-vous également de déclarer un doctype! Assurez-vous que cela est au-dessus de votre <html> élément:

<!DOCTYPE html>
27
David Meister

Utilisez ce code

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
   </tbody>
   </table>
6
Carlos

Tout d'abord, comme pratique générale avec les e-mails, vous voudrez mettre un bloc d'affichage et généralement une bordure: aucune sur toutes les images. Deuxièmement, vous pourriez avoir des problèmes avec les valeurs par défaut. Réglez tous les styles sur les td. Si j'ai besoin d'un espacement spécifique, je définirai la taille de la police et la hauteur de la ligne sur 1px sur le td pour éviter l'héritage. Vous pourriez également avoir besoin de valign top sur votre premier td. Je ne peux pas vraiment dire quelle partie ne correspond pas à la description. Bonne chance avec vos emails.

5
mikevoermans