it-swarm.com.de

css padding funktioniert nicht in outlook

Ich habe folgende HTML in der E-Mail-Vorlage.

Ich erhalte unterschiedliche Ansichten in MS Outlook und in Google Mail für dasselbe.

<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

Wie kann ich das beheben?

39
Muk

Ich wechselte zu folgen und es funktionierte für mich

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

Update basierend auf Bsalex-Anfrage, was sich tatsächlich geändert hat. Ich habe span tag ersetzt

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

mit table und td Tags wie folgt 

   <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

Wenn es um EDMs ( Electronic Direct Mail ) geht, ist Outlook leider Ihr schlimmster Feind. Einige Versionen berücksichtigen das Auffüllen nicht, wenn der Inhalt einer Zelle die Zellabmessungen vorgibt.

Der Ansatz, mit dem Sie das beständigste Ergebnis für alle E-Mail-Clients erzielen, besteht darin, leere Tabellenzellen als Auffüllung zu verwenden (ich weiß, der Horror), aber denken Sie daran Um diese Tabellen mit einem leeren Bild mit den gewünschten Abmessungen zu füllen, werden in einigen Outlook-Versionen die Höhen-/Breitendeklarationen leerer Zellen vermutlich nicht berücksichtigt.

Machen EDMs keinen Spaß? (Nein sind sie nicht.)

48
monners

Um HTML-E-Mail-Vorlagen zu erstellen, die E-Mail-Adressen/Newsletter sind, werden Auffüllen/Marge auf E-Mail-Clients nicht unterstützt. Sie können ein 1x1-Format eines leeren GIF-Bildes nehmen und verwenden.

<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

Benutz einfach
<Table cellpadding="10" ..> ... </Table>
Verwenden Sie kein px.Works in MS-Outlook. 

6
Raj_89

Ich hatte das gleiche Problem und verwendete am Ende border anstelle von padding.

4
Jacob

Tun Sie dies stattdessen:

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

Es ist besser, zwei Zellen zu verwenden und den Inhalt auszurichten, als große Auffüllungen und &nbsp;s zu verwenden.

3
John

Das Auffüllen funktioniert in Outlook nicht. Anstelle eines leeren Bildes können Sie einfach mehrere Leerzeichen ( & nbsp; ) vor Elementen/Texten für das Auffüllen links verwenden. Für das Auffüllen von oben oder unten können Sie hinzufügen Ein Div, das nur Leerzeichen ( & nbsp; ) enthält. Das wird funktionieren !!!

3
Subbu

Nach vielen Tests in Litmus konnte ich in allen E-Mail-Lesern keine Möglichkeit finden, ein perfektes Rendering zu erzielen, aber hier ist die bessere Lösung, die ich gefunden habe:

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

In diesem Code wollte ich padding: 6px 12px emulieren;

Es gibt 2 "12px-Tabellenspalten", die die rechte und linke Auffüllung übernehmen.

Und ich verwende "padding: 6px 0;" auf meinem td-inhalt, um oberes und unteres padding zu verwalten: Outlook 2010 und 2013 ignorieren dies und verwenden ihr eigenes padding.

In Outlook 2010 und Outlook 2013 ist der Text nicht perfekt ausgerichtet (etwas zu weit von oben entfernt), er funktioniert jedoch mit allen anderen E-Mail-Lesern, die ich ausprobiert habe: Apple Mail, Google Mail, Outlook 2011 (ja ..), Hotmail, Yahoo und viele andere Mehr.

Vorschaubild: Outlook 2010 und 2013 Vorschau

Vorschaubild: Gmail, Apple Mail und andere

2
Fab

Meine Lösung ist die Verwendung eines leeren/was auch immer mit einem transparenten Spacer-Gif benötigt wird, da das Auffüllen nicht zu 100% unterstützt wird.

<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

Wie Monners sagt, sind einige E-Mail-Clients furchtbare Paddings. Sie können leere Zeilen und Zellen verwenden, wie er vorschlägt (mit der Vorsichtsmaßnahme, um die Zeilenhöhe auf 1 zu setzen, falls die Zeilenhöhe von td nicht höher sein kann als die Auffüllung).

Ich habe insbesondere eine andere Lösung gefunden, die Rahmen mit der gleichen Farbe des Hintergrunds verwendet. Ich habe diese Lösung positiv in Google Mail (und Google Mail für Unternehmen), Yahoo Mail, Outlook Web, Outlook Desktop und Thunderbird getestet und funktioniert ordnungsgemäß.

Beispiel:

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

Darüber hinaus finden Sie hier eine hervorragende Anleitung zum Erstellen von responsiven Newslettern OHNE Medienanfragen. Ich benutze diese Anleitung schon lange und sie ist ausgezeichnet: https://webdesign.tutsplus.com/tutorials/creating-a- zukunftssicher-responsive-email-without-media-abfragen - cms-23919

Sie können alle Ihre E-Mails testen: https://putsmail.com/

Denken Sie immer daran, Ihre CSS inline zu erstellen. Ich verwende: https://inliner.cm/

Wenn Sie Zweifel an der Unterstützung von CSS haben, können Sie hier gehen: https://templates.mailchimp.com/resources/email-client-css-support/

oder hier: https://www.campaignmonitor.com/css/

0
Sachi Cortes

Das gesamte Styling, einschließlich der Polsterung, muss zu einem td hinzugefügt werden.

Eine andere Lösung fügt den Text in <p>text</p> ein und definiert Ränder, und dies sollte die erforderliche Auffüllung ergeben.

Zum Beispiel:

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

hast du display:inline-block; ausprobiert?

0
Carol McKay