HTML-E-Mails Styling-Problem

Lesezeit: 4 Minuten

El Toro Bauldo

Ich habe ein Problem mit E-Mail-Clients, die meinen Stil wiederherstellen <hr/> zu einem mit nur einer durchgezogenen Linie.

Das Folgende ist mein Markup, sieht in Chrome und IE gut aus, aber Outlook kehrt die gepunktete Linie immer in eine durchgezogene Linie zurück.

<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>

Ich habe mir Campaign Monitor angesehen, aber nichts Besonderes, um mich dorthin zu führen.

Alle Antworten geschätzt.

Ich habe Outlook neu markiert, aber handelt es sich um eine bestimmte Version von Outlook? Ab 2007 vielleicht?

– Andreas Leach

18. April 2012 um 9:24 Uhr
alle E-Mail-Clients wirklich, aber 2003 und 2007 sind die, die ich mir anschaue.

– El Toro Bauldo

18. April 2012 um 12:58 Uhr
Ist Outlook für Websites noch böser als der IE schon immer? Und ist OUTLOOK 2013 noch schlimmer als alle Vorgängerversionen?!!!

– Ben

4. Juli 2014 um 10:09 Uhr

Ich könnte mir vorstellen, dass Outlook die Word-Rendering-Engine von Microsoft und keine HTML-Engine verwendet und ein hr-Tag nur wie in msword auf eine durchgezogene Linie zurückgesetzt wird.

Ich würde wahrscheinlich versuchen, eine Tabelle in voller Breite -> Zelle oder Div zu verwenden und diese zu formatieren, anstatt ein hr-Tag zu verwenden.

<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;">&nbsp;</td>
</tr>
</table>

nbsp ist da, falls die Rendering-Engine leere Zellen nicht erkennt.

Mir ist auch klar, dass dies wahrscheinlich nicht die eleganteste Art ist, es zu codieren.

– Kolin

18. April 2012 um 9:27 Uhr
Danke Kolin, aber es funktioniert tatsächlich. Ich hatte die gleiche Technik mit begrenzter Wirkung ausprobiert. Ich habe die Lösung unten hinzugefügt, die nach Ihren eigenen Worten ziemlich unelegant ist

– El Toro Bauldo

19. April 2012 um 7:55 Uhr
Kümmern Sie sich nicht um das hr-Tag, es sei denn, Sie möchten die Standardfarben und -ränder, die Outlook/Word verwendet.

– trevorc

23. Mai 2012 um 17:26 Uhr
Jeder, der sich über die Eleganz von HTML für E-Mails beschwert, übersieht den Punkt, dass das Codieren für E-Mails nichts mit rechnerischem oder mathematischem Denken zu tun hat; Außerdem neigt es dazu, ziemlich hässlich zu werden.

– Stephan – Shiftcloud

31. Oktober 2013 um 2:37 Uhr

Dies funktionierte hervorragend für mich, nachdem ich die Grenze usw. auf Null gesetzt hatte.

Danke!

– Ender2050

6. August 2014 um 2:49 Uhr

marc82ch

Basierend auf den anderen Antworten fand ich, dass dies am besten funktioniert:

<table border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;">&nbsp;</td>
  </tr>
</table>
<br>

Die Breite scheint gebraucht zu sein table in % oder besser (lt https://www.campaignmonitor.com/resources/will-it-work/guidelines/) eintragen px auf der td wenn möglich.

Der border-bottom Kurzschrift scheint gut zu funktionieren, wo die Langschrift Versionen, wie in Kolins Antwort erwähnt, nicht in Outlook.

EDIT: Was ich früher verwendet habe und auch funktioniert, zumindest in Outlook (wäre schön, wenn jemand, der kann, das in anderen Clients testen könnte), ist a <hr>basierten Ansatz.

<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">

Der

-Ansatz funktioniert auch gut auf dem GMail-Webclient sowie auf dem neuesten Outlook-Desktop-Client ab 2020 (die Versionsnummer ist derzeit nicht sicher).

– Martin Conell

11. Juni 2020 um 19:50 Uhr

Ziemlich unelegant und nur für eine bekannte feste Breite nützlich, aber ich finde, dass dies die Schrecken sind, die Ihnen begegnen, wenn Sie versuchen, die Formatierung in HTML-E-Mails zu korrigieren.

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>

Ich kann nicht glauben, dass ich so etwas verwenden muss, um gepunktete Ränder in Outlook zu bekommen seufzen

– DGibbs

7. August 2013 um 15:01 Uhr
Das p-Tag ist nicht in allen E-Mail-Clients einfach zu kontrollieren, und einige von ihnen (outlook.com) erkennen keinen Rand/Padding auf dem p-Tag, daher empfehle ich nicht, diese Lösung zu verwenden.

– josh1978

29. November 2016 um 22:28 Uhr
hahaha das hat mich zum lachen gebracht. Gut. Ich gebe ihm +1

– Toskanisch

9. September 2019 um 20:37 Uhr

Sie können dieses Beispiel verwenden:

<div style="border-top: 1px dotted #999999;">&nbsp;</div>

Es funktioniert leider nur vor weißem Hintergrund

Es muss eine Schriftgröße deklariert werden, sonst bringt ” ” die Höhe durcheinander.

 <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr>

14455000cookie-checkHTML-E-Mails Styling-Problem

#Ausblick #Email #html #Stile

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