Janniboy: Nach Mailversand plötzlich style-Elemente weg

Hallo zusammen!

Vorab ich hab schon gesucht, sowohl bei Google als auch hier, bin aber nicht fündig geworden.

Und zwar bin ich gerade dabei, eine Testfunktion für ein Newslettersystem zu bauen, mit der der Administrator nochmal checken kann, ob alles funktioniert, bevor er den Newsletter endgültig abschickt.

Dafür habe ich eine HTML-Seite als *.txt gespeichert, die in das Skript eingelesen wird. Die in der Vorlage enthaltenen Platzhalter (z.B. #####TEXT#####) werden dann im Skript durch ihren Inhalt ersetzt. Anschließend werden die eingebetteten Bilder per RMail angehängt, und das ganze abgeschickt. Die Mail ist auch sofort da - aber in Web.de beispielsweise ist das Design völlig verdreht: Logo ist da, Hintergrund jedoch nicht usw.
Das gleiche in WindowsMail.
Das ulkige ist jedoch, dass mein iPod touch die Mail korrekt anzeigt! Also scheint ja beim Versand alles funktioniert zu haben.

Schaut man sich den Quelltext bei Web.de an, stehen dort Sachen wie:

  
<div style="">  
...  
</div>  

anstatt eigentlich

  
<div style="background: url(...);">  
...  
</div>  

Das war jetzt nur ein Beispiel. Web.de und WindowsMail scheinen einige style-Elemente einfach zu löschen. Sämtliches CSS ist inline eingebunden. Ich verstehe das einfach nicht...

Zusätzlich hat das Newsletterskript eine Vorschaufunktion, die online direkt abläuft. Diese liest ebenfalls die Vorlage ein, ersetzt die Platzhalter, nur gibt den String dann aus. Und hier wird die HTML-Datei korrekt angezeigt.

Hat jemand von euch damit schonmal Erfahrungen gemacht, oder kann mir jemand helfen? Da die Mail ja beim iPod richtig formatiert ankommt, sollte es ja eigentlich gehen.

Hier ist der Code der Vorlage:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
<head>  
<title>#####TITEL##### - Jan Kiesewalter</title>  
  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<meta name="description" content="" />  
<meta name="author" content="" />  
<meta name="keywords" content="" />  
  
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />  
  
  
  
</head>  
  
<body style=" font-family: Arial; font-size: 10pt;line-height: 15pt;color: #5A5A5A;background: url(bg.jpg) repeat-y center;padding: 0;margin: 0;">  
<div style=" margin: 0 auto;     width: 900px;    min-width: 900px;    max-width: 900px;    background: url('bg_banner.png') no-repeat center;    margin-top: 0;    color: white;    height: 100px;     min-height: 100px;     max-height: 100px;     position: relative;">  
<a target="_blank" href="http://www.jan-kiesewalter.de.vu"><img src="logo.png" alt="JanKiesewalter - Logo"  style="height: 80px;    margin-left: 50px;    margin-top: 7px;            border: none;"  /></a>  
  
  
</div>  
  
<div style="margin: 0 auto;width: 900px;    background: no-repeat top center;   min-height: 250px;    height: 250px;    margin-top: -10px;background-image: url('#####IMGNR#####.jpg')">  
  
  
</div>  
  
<div style="background: url('bg_navi.png') no-repeat center;margin: 0 auto;width: 900px;margin-top: -40px;height: 75px;min-height: 75px;padding-left: 60px;font-size: 9pt;padding-bottom: 12px;">  
  
  
</div>  
  
<div style=" background: url('bg_textarea.png') no-repeat center top white;    margin: 0 auto;    width: 780px;    margin-top: -23px;      min-height: 350px;    padding-left: 60px;   padding-right: 60px;   padding-top: 40px;     font-size: 10pt;    padding-bottom: 10px;">  
  
  
  
  
  
  
    <div style=" width: 500px;          min-height: 800px;          margin-bottom: 50px;                  margin-left: -20px;">  
  
  
<h1 style="font-size: 20pt;     font-weight: bolder;    margin-bottom: 40px;   line-height: 24pt;">#####HEADLINE#####</h1>  
<h2 style="font-size: 14pt;    font-weight: bolder;    margin-bottom: 30px;     color: #000080;">#####TITEL#####</h2>  
  
<p style=" font-size: 10pt;    line-height: 14pt;    margin-bottom: 30px;">  
#####TEXT#####  
  
  
</p>  
<p style=" font-size: 10pt;    line-height: 14pt;    margin-bottom: 30px;">  
<a style="color: #000080;    text-decoration: none;    outline: none;" target="_blank" href="http://www.jan-kiesewalter.de.vu/blog_show_post.php?id=#####POSTID#####"><b>&gt;&gt;&gt; Beitrag auf der Homepage anzeigen</b></a><br /><br />  
  
  
</p>  
#####HINT#####  
  
  
  
  
    </div>  
  
</div>  
<div   style="background: url('bg_textarea_bottom.png') no-repeat center top ;      border-top: 1px solid #C0C0C0;     margin: 0 auto;     width: 780px;margin-top: -20px;            text-align: center;min-height: 80px;max-height: 80px;    padding-left: 60px;    padding-right: 60px;    padding-top: 12px;    font-size: 10pt;padding-bottom: 10px;line-height: 20pt;">  
  
&copy; Jan Kiesewalter 2009<br />  
<a style="color: #000080;    text-decoration: none;    outline: none;" href="http://www.jan-kiesewalter.de.vu/newsletter_unregister.php">Vom Newsletter abmelden</a>  
  </div>  
</body>  
</html>  
  
  

Bei Web.de fehlt dann plötzlich die Doctype-Deklaration, und manche style-Tags sind weg, andere sind da o.O

Hier der Quelltext des E-Mail-Frames bei web.de - span-Tags im Header? o.O

  
<html>  
<span><title>Neue Sonnenunterg?nge ver?ffentlicht! - Jan Kiesewalter</title>  
<span></span><span></span><span></span><span></span><span></span></span><body style="">  
<div style="">  
<a target="_blank" href="/jump.htm?goto=http%3A%2F%2Fwww.jan-kiesewalter.de.vu"><img src="../downloadAttachment.htm?si=emET77_SfACN5pLe_ez*031&amp;rv_mid=1702091506&amp;attachmentId=cid:927cdb00fdde58ebd72230cffb8531c0" alt="JanKiesewalter - Logo" style="height: 80px;    margin-left: 50px;    margin-top: 7px;            border: none;"></a>  
  
  
</div>  
  
<div style="">  
  
  
</div>  
  
<div style="">  
  
  
</div>  
  
<div style="">  
  
  
  
  
  
  
    <div style="width: 500px;          min-height: 800px;          margin-bottom: 50px;                  margin-left: -20px;">  
  
  
<h1 style="font-size: 20pt;     font-weight: bolder;    margin-bottom: 40px;   line-height: 24pt;">Newsletter</h1>  
<h2 style="font-size: 14pt;    font-weight: bolder;    margin-bottom: 30px;     color: #000080;">Neue Sonnenunterg?nge ver?ffentlicht!</h2>  
  
<p style="font-size: 10pt;    line-height: 14pt;    margin-bottom: 30px;">  
Ab jetzt gibt es wieder einige Sonnenunterg?nge (neudeutsch also "Sunsets" zu bestaunen, ich w?nsche euch viel Spa? beim Reingucken ;-)<br><br>  
Jan  
  
  
</p>  
<p style="font-size: 10pt;    line-height: 14pt;    margin-bottom: 30px;">  
<a style="color: #000080;    text-decoration: none;    outline: none;" target="_blank" href="/jump.htm?goto=http%3A%2F%2Fwww.jan-kiesewalter.de.vu%2Fblog_show_post.php%3Fid%3D%23%23%23%23%23POSTID%23%23%23%23%23"><b>&gt;&gt;&gt; Beitrag auf der Homepage anzeigen</b></a><br><br></p>  
  
#####HINT#####  
  
  
  
  
    </div>  
  
</div>  
<div style="">  
  
© Jan Kiesewalter 2009<br><a style="color: #000080;    text-decoration: none;    outline: none;" href="/jump.htm?goto=http%3A%2F%2Fwww.jan-kiesewalter.de.vu%2Fnewsletter_unregister.php" target="_blank">Vom Newsletter abmelden</a>  
  </div>  
</body>  
</html>  

Alles komplett durcheinander.

Ich hoffe, ihr könnt mir helfen, ich werd bald verrückt!

LG Jan

  1. Hi,

    Schaut man sich den Quelltext bei Web.de an, stehen dort Sachen wie:

    <div style="">

    Web.de und WindowsMail scheinen einige style-Elemente einfach zu löschen. Sämtliches CSS ist inline eingebunden. Ich verstehe das einfach nicht...

    Redest du von Anzeige der Mail über die Web-Frontends der jeweiligen Anbieter?

    Natürlich löschen die das style-Angaben heraus, denn sonst könntest du ja mit den Inhalten deiner Mail deren Seite überlagern - und das wäre nur noch einen kurzen Schritt vom Phishing entfernt.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. Hi!

      Aber wie soll ich denn sonst eine E-Mail formatieren, wie bei den "echten" Newslettern, wenn nicht über inline-CSS?
      Ich hatte gelesen, dass man in Mails generell inline die style-Angaben machen muss, stimmt das nicht?

      LG Jan

      1. Hi,

        Aber wie soll ich denn sonst eine E-Mail formatieren, wie bei den "echten" Newslettern, wenn nicht über inline-CSS?

        Wieso „sonst“?
        Die „beste“ E-Mail ist immer noch vom Type text/plain.

        Ich hatte gelesen, dass man in Mails generell inline die style-Angaben machen muss, stimmt das nicht?

        Externe Stylesheets rufen Mailclients i.a.R. genauso wenig ab, wie bspw. Bilder.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        1. Sicher geht auch Text, aber einen HTML-Newsletter finde ich persönlich schöner.

          1. Hi,

            Sicher geht auch Text, aber einen HTML-Newsletter finde ich persönlich schöner.

            Du schickst ihn also nur an dich selbst - oder warum sollte das relevant sein?

            HTML-Mail, die auch in webbasierten Clients halbwegs sinnvoll angezeigt werden soll, kannst du nur mit möglichst wenig CSS aufbauen. Wenn du darin Inhalte optisch strukturieren willst, bleiben dir eigentlich nur Tabellen.

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            1. Du schickst ihn also nur an dich selbst - oder warum sollte das relevant sein?

              HTML-Mail, die auch in webbasierten Clients halbwegs sinnvoll angezeigt werden soll, kannst du nur mit möglichst wenig CSS aufbauen. Wenn du darin Inhalte optisch strukturieren willst, bleiben dir eigentlich nur Tabellen.

              MfG ChrisB

              Natürlich nicht, das ist bisher nur eine Testfunktion. Aber optisch schönere - sofern möglich - Newsletter kommen bei allen, die ich kenne, besser an. Aber egal.

              Ich bau es mal mit Tabellen auf.

              LG Jan

      2. Hi!

        Aber wie soll ich denn sonst eine E-Mail formatieren, wie bei den "echten" Newslettern, wenn nicht über inline-CSS?
        Ich hatte gelesen, dass man in Mails generell inline die style-Angaben machen muss, stimmt das nicht?

        LG Jan

        Hinweis: prüf nach, ob es einen Untschied beim Betrachen der Mail
        über ein Web-Interface und einem lokal installierten POP3 oder
        IMAP Client gibt.

        1. Hinweis: prüf nach, ob es einen Untschied beim Betrachen der Mail
          über ein Web-Interface und einem lokal installierten POP3 oder
          IMAP Client gibt.

          Ja den gibt es, beim Webinterface werden style-Tags gelöscht, bei Windowsmail (eigentlich ein POP3-Client) auch, beim iPod (auch POP3) nicht.

  2. ganze abgeschickt. Die Mail ist auch sofort da - aber in Web.de beispielsweise ist das Design völlig verdreht: Logo ist da, Hintergrund jedoch nicht usw.

    Wenn z.B. ein Hintergrund nach einem "verschieben" (also z.B.
    mailen) nicht mehr da ist, dann liegt es meistens daran, dass
    der Verweis auf das Hintergrundbild nach dem "verschieben" nicht
    mehr stimmt. Siehe  absolute und relative Pfadangaben etc.

    1. ganze abgeschickt. Die Mail ist auch sofort da - aber in Web.de beispielsweise ist das Design völlig verdreht: Logo ist da, Hintergrund jedoch nicht usw.

      Wenn z.B. ein Hintergrund nach einem "verschieben" (also z.B.
      mailen) nicht mehr da ist, dann liegt es meistens daran, dass
      der Verweis auf das Hintergrundbild nach dem "verschieben" nicht
      mehr stimmt. Siehe  absolute und relative Pfadangaben etc.

      Das kann aber nicht sein, da es, wie geschrieben, auf dem iPod touch, der ja auch ein einfacher Mail-Client ist, alles korrekt dargestellt wird. Die Bilder werden ja mit Hilfe von RMail als Attachment mitverschickt, und in HTML eingebettet.

      LG Jan

      1. Das kann aber nicht sein, da es, wie geschrieben, auf dem iPod touch, der ja auch ein einfacher Mail-Client ist, alles korrekt dargestellt wird. Die Bilder werden ja mit Hilfe von RMail als Attachment mitverschickt, und in HTML eingebettet.

        Das mit dem IPod habe ich gelesen und vor meinem Betrag berücksichtigt.
        Ich kann die Dinger nicht - aber ich schliesse nicht aus, das sie sich
        in  lok. Netz einloggen und die Daten (Hintergrundbild) über das lok.
        Netz laden.

        Bitte keine Kommentare (an mich) über das, was ein IPod kann (auch wenn
        sie sich nicht in lok. Netze einloggen können). Die Dinger gehen mir am
        Arsch vorbei ....