HTML was tun wenn div nicht unterstützt wird?

[Pfandfinder]

ich habe einen HTML-code den ich überall für meine Mail-Signatur nutze. in meiner Mail Client app am Handy ist mir jetzt aufgefallen dass der Code aber so gar nicht verwendet wird, div wird zu span umgewandelt und somit wird auch das style vom div (margin) nicht verwendet, die Absätze fehlen also .

und am Ende einer Mail hatte ich auch noch 2 Zeilenumbrüche bzw. margin-bottom aber auch <br> am Ende wird vom Client gelöscht dann.


Wie kann ich das umsetzen, dass ich da jetzt Abstände rein bekomme ?

 

[floq0r]

Bleiben die Classnames erhalten? Dann mach das formatting darüber

 

[Madman1209]

Hi,

Mail Signaturen sind immer tricky, da funktionieren viele viele Dinge nicht oder nicht richtig. An der Stelle sollte man sich immer auf das absolute Minimum beschränken und die simpelsten Elemente verwenden.

Und: nicht zu viel Zeit darauf verschwenden, dass es "fancy" aussieht. Ich kenne genug Firmen, da lässt der Filter HTML überhaupt nicht durch, sondern nur den Plaintext.

VG,
Mad

 

[martinallnet]

Ich habe aus Sicherheitsgründen HTML in E-Mails aus, das ist bei jedem vernünftigen Client auch Standard.
Daher einfach auf HTML-E-Mails verzichten, die sind eher ein Sicherheitsrisiko als nützlich.

 

[netzgestaltung]

In Emails wird viel rausgeschnitten, je nach Client-Anbieter (Outlook online, Gmail, GMX) unterschiedlich und Outlook Desktop(wenigstens bis 2016) hat als Mail-HTML-Interpreter Word97(kein Witz)

Daher werden in Emails klassische Table-Layout Konstrukte gebaut (schaut mal Newsletter genau an)
DIV sollte normal aber OK sein. Klassennamen verschwinden aber, da hat jeder Client eigene Vorgaben (das HTML/CSS der Mail darf die umliegende Seite nicht stören oder von ihr gestört werden), daher immer inline-CSS nutzen.

Wenn der DIV in SPAN gewandelt wird, probier einfach gleich SPAN oder P - und schau mal ob der style bleibt.
Semantik kann hier getrost vergessen werden.

eine genaue übersicht, welches CSS möglich ist gibts hier: https://caniuse.email/
und noch genauere und aktuellere Infos gibts hier: https://www.campaignmonitor.com/css/

beispielsweise funktioniert CSS-Shorthand oft nicht, daher statt beispielsweise style="margin: 3px 10px 2px 5px" wird das gemacht: style="margin-left:5px;margin-right:10px;margin-bottom:2px;margin-top:3px;"

Damit Bilder angezeigt werden ist es nötig diese encodiert einzubetten statt zu referenzieren, dafür hab ich mal ein kleines tool gemacht: https://jsfiddle.net/4qp1xt6r/4/

 

[owned139]

display: block;

Und das funtzt auch nicht?

 

[netzgestaltung]

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

schaut schlecht aus ;-)

der war falsch, schaut doch gut aus: https://www.campaignmonitor.com/css/positioning-display/display/
hat sich ja was getan.

jedenfalls ist das einfachste einen P zu nehmen. der ist ein Block-Element ohne das CSS nötig ist. Dazu margin-bottom:xxpx;

btw welche Mail App am Handy ist denn das? kommt die in den kompatibilitätslisten vor?

eine cross-client lösung könnte zb so aussehen:

<p style="margin-bottom:10px;padding-bottom:10px;">
  <span style="display:block;margin-bottom:10px;">erste zeile</span>
  <span style="display:block;margin-bottom:10px;">zweite zeile</span>
  <span style="display:block;">dritte zeile, <br />
    vierte zeile ohne abstand
  </span>
</p>

 

[Nerdovic]

Meine Empfehlung war bisher immer: Signatur plaintext.
So viele Mail-Clients wie es gibt kann man nie sicher sein wie die Signatur am anderen Ende dann aussieht. Außer bei plaintext, der sieht eigentlich überall gleich aus.