✔ CSS im HTML-Code für E-Mail-Design deaktivieren

Matze202

Matze202

Erfahrenes Mitglied
Hiho @all,

ich hab gelesen, dass es Probleme geben soll, das HTML-Design einer E-Mail immer richtig angezeigt zu bekommen.

Nun ist mir die Idee gekommen, das CSS im eigenen HTML-Code komplett zu deaktivieren oder den CSS-Code von GMX.de, Web.de etc. aus dem eigenen HTML-Code auszugrenzen, welches ja für die Änderungen am Design verantwortlich sein soll. Nur habe ich dazu leider noch nichts brauchbares gefunden.

Oder hilft es zuverlässig, wenn man die alle Werte die in Frage kommen immer mit !important erzwingt, aber ich wollte eigentlich diese im reinen HTML versenden, da nicht alle E-Mail-Anbieter die CSS-Daten richtig wiedergeben würden.

Bei meiner Firefox-E-Mail habe ich was in der folgende Art gesehen:
HTML: 
<?xml version=3D"1=2E0" ?>
<=21DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1=2E0 Transitional//EN"
"http://www=2Ew3=2Eorg/TR/xhtml1/DTD/xhtml1-transitional=2Edtd">
<html xmlns=3D"http://www=2Ew3=2Eorg/1999/xhtml">
<head>
<title>FRITZ=21Box Erreichbarkeit aus dem Internet</title>
<meta http-equiv=3D"content-type" content=3D"text/html; charset=3Dutf-8"/>=

<style type=3D"text/css">
body =7B font-family: Arial, Helvetica, sans-serif; color: =23000000; marg=
in: 15px 0px 0px 0px; background-color: =23FFF6CD;=7D
p, table, div =7B font-size: 10pt; padding: 0px; margin: 0px; =7D
table =7B border-collapse: collapse; =7D
td, th =7B text-align:left; =7D
a =7B text-decoration: underline; color:=231A66C0;=7D
a:hover =7B text-decoration: underline; color:=2390BFF7; =7D
=2EDataspalte =7B width: 800px; vertical-align: top; =7D
=2Elink_black =7B text-decoration: underline; color:=23000000;=7D
=2Elink_white =7B text-decoration: underline; color:=23ffffff;=7D
=2Elink_white:hover =7B text-decoration: underline; color:=23fce682; =7D
=2Emb10 =7B margin-bottom: 10px; text-align: left; =7D
=2EtMinihell =7B height: 12px; font-size: 9pt; background-color:=23ffffff;=
=7D
=2EtMinidunkel =7B height: 12px; font-size: 9pt; background-color:=23f0f5f=
8; =7D
=2Etborder =7B background-color:=23FFFFFF; border: 2px solid =23ffffff; fo=
nt-size: 9pt;=7D
=2Etborder th =7B background-color:=23f0f5f8; =7D
=2Ehead =7B background-color:=2365A6ED; color: =23ffffff; font-size:18pt; =
padding-top:10px; padding-bottom:10px;=7D
=2Ehead_klein =7B background-color:=2365A6ED; color: =23ffffff; font-size:=
10pt; =7D
=2Econtent =7B width: 740px; margin: auto; border: =23efefff 1px solid;=7D=

=2Econtent2 =7B width: 740px; margin: auto; border: none;=7D
=2Etborder td, =2Etborder td =7B padding: 1px 2px; =7D
</style>
</head>

Nach was muss ich da eigentlich suchen, wenn ich nähere Information über die Handhabung der 3D, =7B, =7D, 2E etc. Einträge haben will, die vor und nach den Werten stehen, falls ich doch mich an den CSS-Handhabungen in den E-Mails versuchen will.

Gruß Matze202.
 
Hi

https://en.wikipedia.org/wiki/Quoted-printable
Zum Übersetzen gibts uA. einige Webseiten, Notepad++-Plugins, undundund...
CSS: 
body { font-family: Arial, Helvetica, sans-serif; color: #000000; margin: 15px 0px 0px 0px; background-color: #FFF6CD;}
p, table, div { font-size: 10pt; padding: 0px; margin: 0px; }
table { border-collapse: collapse; }
td, th { text-align:left; }
a { text-decoration: underline; color:#1A66C0;}
a:hover { text-decoration: underline; color:#90BFF7; }
.Dataspalte { width: 800px; vertical-align: top; }
.link_black { text-decoration: underline; color:#000000;}
.link_white { text-decoration: underline; color:#ffffff;}
.link_white:hover { text-decoration: underline; color:#fce682; }
.mb10 { margin-bottom: 10px; text-align: left; }
.tMinihell { height: 12px; font-size: 9pt; background-color:#ffffff;}
.tMinidunkel { height: 12px; font-size: 9pt; background-color:#f0f5f8; }
.tborder { background-color:#FFFFFF; border: 2px solid #ffffff; font-size: 9pt;}
.tborder th { background-color:#f0f5f8; }
.head { background-color:#65A6ED; color: #ffffff; font-size:18pt; padding-top:10px; padding-bottom:10px;}
.head_klein { background-color:#65A6ED; color: #ffffff; font-size:10pt; }
.content { width: 740px; margin: auto; border: #efefff 1px solid;} 
.content2 { width: 740px; margin: auto; border: none;}
.tborder td, .tborder td { padding: 1px 2px; }
 
SpiceLab hat gesagt.:
Mit dem kryptischen Client-CSS kann ich ehrlich gesagt nix anfangen :D

Zumindest steht =7B für { , =7D für } , =23 für # usw.
Zum Vergrößern anklicken....
sheel hat gesagt.:
CSS: 
body { font-family: Arial, Helvetica, sans-serif; color: #000000; margin: 15px 0px 0px 0px; background-color: #FFF6CD;}
p, table, div { font-size: 10pt; padding: 0px; margin: 0px; }
table { border-collapse: collapse; }
td, th { text-align:left; }
a { text-decoration: underline; color:#1A66C0;}
a:hover { text-decoration: underline; color:#90BFF7; }
.Dataspalte { width: 800px; vertical-align: top; }
.link_black { text-decoration: underline; color:#000000;}
.link_white { text-decoration: underline; color:#ffffff;}
.link_white:hover { text-decoration: underline; color:#fce682; }
.mb10 { margin-bottom: 10px; text-align: left; }
.tMinihell { height: 12px; font-size: 9pt; background-color:#ffffff;}
.tMinidunkel { height: 12px; font-size: 9pt; background-color:#f0f5f8; }
.tborder { background-color:#FFFFFF; border: 2px solid #ffffff; font-size: 9pt;}
.tborder th { background-color:#f0f5f8; }
.head { background-color:#65A6ED; color: #ffffff; font-size:18pt; padding-top:10px; padding-bottom:10px;}
.head_klein { background-color:#65A6ED; color: #ffffff; font-size:10pt; }
.content { width: 740px; margin: auto; border: #efefff 1px solid;}
.content2 { width: 740px; margin: auto; border: none;}
.tborder td, .tborder td { padding: 1px 2px; }
Zum Vergrößern anklicken....
So sieht's doch gleich viel lesbarer aus :D
 
Danke euch für die schnelle Antworten! ;)

Ja, der Quellcode ist aus dem Thunderbird.

Ich lese mir das gleich durch, aber eine Frage vorab, diese Buchstaben-Zahlen-Kombinationen muss ich also nicht Programmieren, sondern werden von den Clients oder Websites selbst umgewandelt oder?
 
Ich hab leider noch nicht ganz verstanden, was jetzt eigentlich geplant ist.

Sendest du Mails oder bekommst du sie (von Sachen, die du nicht beeinflussen kannst)?
Für welchen Teil des Mailprozesses programmierst du etwas, wo das zu beachten relevant werden könnte?
In welcher Sprache/Umgebung/etc.?

Das Grund ist halt, dass ein "rohes" Mail, wie es über die Leitung geht, nur bestimmte Buchstaben enthalten darf (ist infach so erfunden worden). Um andere Buchstaben (oder auch Binärdaten wie Bilder etc.) mitzuschicken hilft man sich mit diesem Quotedprintable-Encoding, mit dem man beliebige Daten nur durch die erlaubten Buchstaben darstellen kann (und später wieder rückumwandelt). Programme wie Thunderbind haben das eingebaut, ohne dass man selbst noch irgendwas programmieren muss (wenn es da Probleme gibt, einen Fehler an den Entwickler melden).

PS: Ein ganz anderes, unabhängiges Problem ist, dass manche Leute ihre Mailprogramme so eingestellt haben, dass das ganze HTML/CSS-Zeug nicht angezeigt wird (bzw. manche Mailprogramme können es auch nicht anzeigen, aber die verwendet hoffentlich keiner mehr), zB. aus Sicherheitsgünden (JS, Tracking...). Es gibt die Möglichkeit, in einem Mail eine HTML-Version und eine Reintext-Version zu schicken, damit dann ggf. die Reintextversion angezeigt werden kann.
 
aber ich wollte eigentlich diese im reinen HTML versenden, da nicht alle E-Mail-Anbieter die CSS-Daten richtig wiedergeben würden.
Zum Vergrößern anklicken....
Ganz ehrlich, mit Leuten die solche Anbieter verwenden hab ich kein Mitleid.
Sollen sie doch was Vernünftiges nehmen. (Bei GMX sind mir noch keine Probleme aufgefallen,
auch wenns ich nicht soo oft verwend)

Jedenfalls, egal ob mit oder ohne CSS, ich seh den Zusammenhang zum QP-Enoding nicht.
Das Encoding gibts auch ohne CSS.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück