Outlook 2003 entfernt Textdekoration – HTML-E-Mail

StackOverflow https://stackoverflow.com/questions/3256295

Frage

Ich habe einige Probleme mit einem meiner Kunden.Ich habe eine E-Mail-Vorlage erstellt (nicht entworfen), die sie mit „Erstellen/Senden“ verwenden können.Ich habe den Design-Testservice von Create/Send genutzt und alles sieht wie vorgesehen aus.Wenn der Client die E-Mail jedoch in Outlook 2003 anzeigt, fehlt die Textformatierung (siehe Screenshots).

Es gibt sehr wenig CSS im Kopf des Dokuments und schon gar nichts, was diese Auswirkungen haben sollte, da ein Großteil des Stils inline erfolgt.

Hat jemand irgendwelche Ideen?

Wie beabsichtigt

Alternativtext http://citywest.bangtest.co.uk/stackoverflow/okay.png

OutLook 2003

Alternativtext http://citywest.bangtest.co.uk/stackoverflow/bad.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

City West E-Bulletin

    <style type="text/css" media="screen">
        * { font-family: Arial, san-serif; }
        a {color:#000000;}
        a img {border:none;}
        h3 a { color: #BD2C16; }
        .topbannercopy a {color:#ffffff;}
        .unsub a {color: #555555; text-decoration:none;}
        .unsub a:hover {text-decoration:underline;}
    </style>

</head>

<body style="text-align: left;">

    <table border="0" bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="591" align="center" style="font-family: Arial, san-serif;">
        <tr bgcolor="#e95c55">
            <td colspan="4"><img src="img/top-trust.gif" alt="City West Housing Trust. e-Bulletin for Staff" width="591" height="195"></td>
        </tr>
        <tr bgcolor="#e95c55">
            <td style="color: #ffffff; font-size: 11px; padding-left: 10px; padding-bottom: 5px;" colspan="4"><$description default=''$></td>
        </tr>
        <tr>
            <td bgcolor="#e95c55" colspan="4">
                <img src="<$imagesrc link='true'$>" alt="read more" width="591">
            </td>
        </tr>
        <tr bgcolor="#e95c55" valign="top" style="padding: 10px;">
            <td colspan="1" style="color: #BD2C16; padding-left: 10px;">
                <h3 style="font-size: 15px;"><$title link='true'$></h3>
            </td>
            <td colspan="3" style="color: #ffffff; font-size: 12px; padding-left: 20px;"><span class="topbannercopy"><$description default=''$></span></td>
        </tr>
        <tr valign="top" style="font-size: 10px;">
            <td width="133" style="padding-top: 10px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px; padding-left: 20px; padding-right: 9px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px; padding-left: 9px; padding-right: 20px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
        </tr>
        <tr valign="top" style="font-wieght: bold; padding-bottom: 10px; font-size: 12px;">
            <td width="133">
                <p><$description default=''$></p>
            </td>
            <td width="133" style="font-wieght: bold; padding-left: 20px; padding-right: 9px;">
                <p><$description default=''$></p>
            </td>
            <td width="133" style="font-wieght: bold; padding-left: 9px; padding-right: 20px;">
                <p><$description default=''$></p>
            </td>
            <td width="133">
                <p><$description default=''$></p>
            </td>
        </tr>
        <tr>
            <td rowspan="2" colspan="1" valign="top"><img src="img/slash-left.gif" width="133" height="50" alt=""></td>
            <td rowspan="1" colspan="3" valign="top"><img src="img/slash-right.gif" width="458" height="42" alt=""></td>
        </tr>
        <tr align="right">
            <td colspan="3" style="font-size: 10px;">&nbsp;</td>
        </tr>
        <tr align="right">
            <td colspan="4" style="font-size: 10px;">City West, the City West Logo and all other City West product or service names are<br>trade marks of City West. All Rights Reserved. <unsubscribe>Unsubscribe</unsubscribe>.</td>              
        </tr>
    </table>
</body>

War es hilfreich?

Lösung 3

Ich habe seitdem herausgefunden, dass die Version von Outlook, dass der Client die Rendering-Engine von der installierten IE-Version von IE installiert ist.In diesem Fall ist es IE6!Ich habe seitdem getestet und ändert die Vorlage und alles ist jetzt gut.

Vielen Dank für Ihre Hilfe.

Andere Tipps

Ihr Stylesheet wird ignoriert (was ist das erwartete Verhalten in Outlook).Konvertieren Sie die in die Inline-Stile und sind fertig!Das letzte Mal, in dem ich überprüft habe, ignoriert Google Mail auch Stylesheets, so dass Sie besser nicht mehr verwenden.

Entfernen Sie die Stile für die Schriftarten und verwenden Sie die <font> Etikett.Z.B.

<td style="color: #ffffff; font-size: 11px; padding-left: 10px; padding-bottom: 5px;" colspan="4"><$description default=''$></td>

Einbiegen in:

<td style="padding-left: 10px; padding-bottom: 5px;" colspan="4"><font color="#ffffff" size="11px"><$description default=''$></font></td>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top