Die CSS-Auffüllung funktioniert nicht in Outlook

Lesezeit: 9 Minuten

Benutzeravatar von Mukesh
Mukesch

Ich habe folgenden HTML-Code in der E-Mail-Vorlage.

Ich bekomme in MS Outlook und in Gmail unterschiedliche Ansichten 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 Gmail

Im Outlook
Im Ausblick

Wie kann man das beheben?

  • Als Einstieg könnten Sie versuchen, alle Elemente mit *{margin: 0; padding: 0;} in Ihrem externen Stylesheet. Ich mache das beim Debuggen. Stellen Sie dann margin/padding lokal auf die einzelnen Elemente ein (wie Sie es bereits getan haben).

    – HaunsTM

    31. Januar 2014 um 7:07 Uhr

  • Tut mir leid, wenn das nicht relevant ist – ich bin neu in HTML – aber ich hatte gerade einige Erfolge mit margin <p style='margin-left:36.0pt'> was ich herausfand, indem ich die E-Mail-Quelle ansah, nachdem ich sie so eingerichtet hatte, wie ich es wollte.

    – SSlinky

    23. August 2016 um 10:34 Uhr


  • @nless Der von Ihnen erwähnte Link bezieht sich auf dieselbe Frage.

    – Mukesch

    27. Juni 2018 um 14:30 Uhr

Benutzeravatar von monners
Mahner

Leider, wenn es um EDMs geht (Elektronische Direktwerbung), Outlook ist Ihr schlimmster Feind. Einige Versionen berücksichtigen das Auffüllen nicht, wenn der Inhalt einer Zelle die Zellenabmessungen vorschreibt.

Der Ansatz, der Ihnen am meisten bringt konsistent Das Ergebnis bei E-Mail-Clients ist die Verwendung leerer Tabellenzellen als Polsterung (ich weiß, der Horror), aber denken Sie daran, diese Tabellen mit einem leeren Bild mit den gewünschten Abmessungen zu füllen, da, Sie haben es erraten, einige Versionen von Outlook die Höhe/ Breitenangaben von leeren Zellen.

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

  • danke für den Hinweis auf Bilder, das wird definitiv funktionieren. Übrigens für diejenigen, die nach richtigen Bildern suchen – placehold.it ist eine wirklich gute Quelle zB placeholdit.imgix.net/…

    – Godblesserdbeere

    9. November 2016 um 11:07 Uhr


  • Musste den Impuls unterdrücken, zu diesem Thema abzustimmen, weil Outlook scheiße ist … aber gute Antwort, also +1

    – GDY

    16. November 2017 um 8:47 Uhr

  • Was ist ein EDM?

    – Ismael

    16. Januar 2018 um 17:40 Uhr

  • Übrigens – Ich habe es geschafft, ohne Bild aufzulösen, indem ich “% width” für td in der Tabelle verwendet habe

    – Karan Chadha

    13. März 2018 um 0:43 Uhr

  • @Craig1123 Das macht viel mehr Sinn als elektronische Tanzmusik. 😉

    – Matt Cosentino

    26. März 2019 um 23:21 Uhr

Benutzeravatar von Sachi Cortes
Sachi Cortes

Vermeiden Sie Füll- und Seitenränder in Newsletternignorieren einige E-Mail-Clients diese Eigenschaften.

Sie können “leer” verwenden tr und td wie vorgeschlagen wurde (aber dies führt zu einer Menge HTML), oder Sie können Verwenden Sie Rahmen mit der gleichen Rahmenfarbe wie der Hintergrund der E-Mail. also statt padding-top: 40px Sie können verwenden border-top: 40px solid #ffffff (vorausgesetzt, die Hintergrundfarbe der E-Mail ist #ffffff)

Ich habe diese Lösung in Google Mail (und Google Mail for Business), Yahoo Mail, Outlook Web, Outlook Desktop, Thunderbird, Apple Mail und mehr getestet. Soweit ich das beurteilen kann, ist die Verwendung von Grenzeigentum überall ziemlich sicher.

Beispiel:


<!-- With paddings (WON'T WORK IN ALL EMAIL CLIENTS!) -->
<table>

    <tr>

        <td style="padding: 10px 10px 10px 10px">
            <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result with borders (assuming a white background-color) -->
<table>

    <tr>

        <td style="border: solid 10px #ffffff">
           <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result using empty td/tr (A lot more html than using borders, messy on large emails) -->
<table>

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>


    <tr>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

        <td><!--Content goes here--></td>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

    </tr>


    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

</table>

<!-- 
With tr/td every property is needed:
- "height" must be setted both as attribute and style, same with width. 
- "line-height" must be setted because the default value may be greater than the wanted height.
- The "&nbsp;" is there because some email clients won't render empty columns. 
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->

Darüber hinaus ist hier eine hervorragende Anleitung zum Erstellen Responsive Newsletter ohne Medienabfragen. Die E-Mails funktionieren wirklich überall:

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919

Und immer daran denken Stile inline erstellen. Dies ist wichtig, da einige E-Mail-Clients unterstützt nicht das <style> Schild:

https://inliner.cm/

Zu E-Mails testenhier ist eine gute Quelle:

https://putsmail.com/

Schließlich für Zweifel an CSS-Unterstützung in E-Mail-Clients Sie können hier gehen:

https://templates.mailchimp.com/resources/email-client-css-support/

oder hier:

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

BEARBEITEN:

Bei Problemen mit der Verwendung von Rahmen in Outlook können Sie versuchen, dieses Snippet zu Ihrem E-Mail-Kopf hinzuzufügen (Outlook unterstützt <head> Schild):

<head>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse:collapse; border-spacing:0; margin:0}
        div, td {padding:0;}
        div {margin:0 !important;}
    </style>
    <![endif]-->
</head>

Outlook geht davon aus, dass sich die Ränder der Tabellenzellen nicht überlappen sollten, es sei denn, Sie verwenden border-collapse:collapse in den Tabellenstilen.

  • Gerade in Outlook 365 (v16.0.12527) getestet, und ich habe festgestellt, dass das Anwenden eines Rahmens auf meinen H2-Stil wie folgt aussieht: h2 { border-top: solid 100px #ffffff; } fügt ein paar Pixel Rand hinzu (vielleicht 8?), aber nicht die 100 Pixel, die ich angebe. Ich habe das viele Male mit verschiedenen Werten versucht, immer der gleiche ~8px-Rand.

    – Mike

    8. März 2021 um 21:47 Uhr

  • Funktioniert nicht in Outlook. Man outlook ist ein Stück [email protected]

    – Verrückter Mac

    28. September 2021 um 23:50 Uhr

  • Die Randstärke ist nur so dick wie der Container selbst in Outlook. Mit anderen Worten, wenn Sie a 100px Randstärke, dann zeigt Outlook nur so viel des Randes an, wie es für den Container des aktuellen Elements anzeigen kann. Für mich fühlt sich das wie das alte IE-Box-Modell an. Der Trick besteht darin, eine Höhe für das enthaltende Element anzugeben, normalerweise eine Tabelle oder td für Outlook.

    – Metro Schlumpf

    27. Juli um 21:35 Uhr

Benutzeravatar von Mukesh
Mukesch

Ich wechselte zu Folgendem 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 das 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 Tabellen- 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>

  • Bitte geben Sie an, was geändert wurde. Zwingen Sie Benutzer nicht, Diff-Tools zu verwenden.

    – Bsalex

    31. Mai 2018 um 22:23 Uhr

  • Die Polsterung muss weitergehen <td>s für Cross-E-Mail-Kompatibilität, nicht <span>s.

    – Nathan

    16. September 2021 um 6:29 Uhr

Um HTML in einer E-Mail-Vorlage zu erstellen, die E-Mailer/Newsletter ist, wird Padding/Margin von E-Mail-Clients nicht unterstützt. Sie können ein leeres GIF-Bild in der Größe 1×1 nehmen und es 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="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/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="https://stackoverflow.com/questions/21474239/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="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

Benutz einfach
<Table cellpadding="10" ..>
...
</Table>


Verwenden Sie px.Works nicht in MS-Outlook.

  • cellpadding an <table> ist unzuverlässig, genau wie cellspacing. Verwenden Sie am besten eine Polsterung <td>

    – schwelgen

    26. August 2016 um 14:10 Uhr

Benutzeravatar von Subbu
Subbu

Padding funktioniert nicht in Outlook. Anstatt ein leeres Bild hinzuzufügen, können Sie einfach mehrere Leerzeichen verwenden (& nbsp;) vor Elementen/Texten zum Auffüllen links Zum Auffüllen oben oder unten können Sie ein div einfügen, das nur Leerzeichen enthält (& nbsp;) allein. Das wird funktionieren!!!

  • cellpadding an <table> ist unzuverlässig, genau wie cellspacing. Verwenden Sie am besten eine Polsterung <td>

    – schwelgen

    26. August 2016 um 14:10 Uhr

Benutzeravatar von Jacob
Jacob

Ich hatte das gleiche Problem und landete tatsächlich mit border Anstatt von padding.

  • wäre brillant, wenn es funktionieren würde – nicht auf outlook.com gelöst

    – Niltoide

    16. April 2018 um 18:53 Uhr


  • Scheint bei meiner Version von Outlook zu funktionieren. Danke Jakob!

    – Ausstehende Rechnung

    2. Dezember 2019 um 3:10 Uhr

1436750cookie-checkDie CSS-Auffüllung funktioniert nicht in Outlook

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy