HTML Newsletter - kein CSS bei Vista Outlook

Dustin84

Erfahrenes Mitglied
Hallo,

ich habe inen Newsletter gebaut, der auch wunderbar funktioniert.
Nur bei Outlook unter Vista werden die CSS nicht berücksichtigt.

Hier mal der Kopfbereich der EMail:

PHP:
<html>
<head>
<title>Newsletter</title>
<style type="text/css">
	p, ol, ul, li, .normal { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px; color: #999999; }
	
	.kleingrau { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; line-height:11pt; color: #999999; }
	
	.headline { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:15px; font-weight:bold; color: #999999; }
	
	.nav { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:11px; color: #999999; }
	.navaktiv { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:11px; color: #FFFFFF; }
	
	.unternav { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; color: #999999; }
	.unternavaktiv { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; color: #FFFFFF; }
	
	.blaettern { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px; color: #FFFFFF; }
	
	a.navaktiv:link { text-decoration: none; color: #FFFFFF; }
	a.navaktiv:active { text-decoration: none; color: #FFFFFF; }
	a.navaktiv:visited { text-decoration: none; color: #FFFFFF; }
	a.navaktiv:hover { color: #FFFFFF; text-decoration: underline }
	
	a.unternav:link { text-decoration: none; color: #999999; }
	a.unternav:active { text-decoration: none; color: #999999; }
	a.unternav:visited { text-decoration: none; color: #999999; }
	a.unternav:hover { color: #999999; text-decoration: underline }
	
	a.unternavaktiv:link { text-decoration: none; color: #FFFFFF; }
	a.unternavaktiv:active { text-decoration: none; color: #FFFFFF; }
	a.unternavaktiv:visited { text-decoration: none; color: #FFFFFF; }
	a.unternavaktiv:hover { color: #FFFFFF; text-decoration: underline }
	
	a.blaettern:link { text-decoration: none; color: #FFFFFF; }
	a.blaettern:active { text-decoration: none; color: #FFFFFF; }
	a.blaettern:visited { text-decoration: none; color: #FFFFFF; }
	a.blaettern:hover { color: #FFFFFF; text-decoration: underline }
	
	a:link { text-decoration: none; color: #999999; }
	a:active { text-decoration: none; color: #999999; }
	a:visited { text-decoration: none; color: #999999; }
	a:hover { color: #FFFFFF; text-decoration: none }
</style>

<base href='http://abc-fotografie.de' /> // Fake URL - nicht die echte
</head>


Interessant ist, dass mir der Quelltext der Mail folgendes anzeigt:
<base href='http://abc-fotografie.de' />

Diese Codezeile wurde automatisch generiert, sie steht nicht in meinen Code.

Würde mich über Tipps freuen.

Gruß
D.
 
Hi,

wird das vollständige Stylesheet nicht interpretiert, oder nur Auszüge daraus?

Bei den Pseudoklassen für Verweise fällt zumindest schon mal auf, dass du diese in der falschen Reihenfolge nennst.

Die korrekte Reihenfolge lautet hier:

CSS:
a:link { }
a:visited { }
a:hover { }
a:active { }

Ansonsten kann ich in dem Codesnippet keine weiteren Fehler ausmachen, die die Arbeitsverweigerung von Outlook erklären bzw. noch korrigiert gehören, damit es in Outlook funktioniert, und vermute daher eher die Outlook-/Systemeinstellungen in Vista, die die Ausführung des Stylesheets "blockieren".

Übrigens kannst du im Stylesheet die Schriftfamile global für das Dokument über das body-Element festlegen, und mußt sie nicht mehrmals angeben, sowie alle Selektoren mit gleichen Eigenschaftswerten gruppieren, um den CSS-Code zu verschlanken.

Was die Ausgabe von <base href='http://abc-fotografie.de' /> betrifft, solltest du vielleicht nochmal das Newsletter-Script durchforsten, denn von nichts kommt nichts. Letztlich sollte aber diese Angabe vernachlässigt werden können, da sie keine Auswirkung auf das zentrale Stylesheet im Dokumentheader hat.

mfg Maik
 
Outlook 2007 nutzt leider nicht mehr die Rendering-Engine des Internet-Explorer sondern die von Word 2007, damit hat es so ziemlich jede brauchbare CSS-Eigenschaft verlernt und unterstützt somit weniger Standards als Outlook 2003. (Glaube, nichtmal mehr der <style>-Tag wird unterstützt)

Hier findest du eine "Fähigkeiten-Liste" der Engine, veröffentlicht von Microsoft.

Grüße
 
Ist ja lustig, wozu wird dort in allen Elementen das class-Attribut unterstützt, wenn es nicht möglich ist, mit diesen Klassen etwas anzufangen :eek:
 
blödes Outlook ;-(

Die Sheets werden teilweise übernommen. Was nicht geht, sind sämtliche "margin" Tags. Kann man das Problem lösen oder muss mein Newsletter ohne Abstände auskommen ?

Gruß
D.
 
Zurück