توقعات 2003 تجريد من زخرفة النص-أتش تي أم أل البريد الإلكتروني

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

سؤال

لدي بعض المشاكل مع عميل لي.لقد بنيت (غير مصممة) قالب البريد الإلكتروني بالنسبة لهم لاستخدامها مع إنشاء/إرسال.لقد استخدمت خدمة اختبار التصميم من إنشاء / إرسال وكل شيء يبحث على النحو المنشود.ومع ذلك ، عندما يقوم العميل بعرض البريد الإلكتروني في أوتلوك 2003 تنسيق النص مفقود (انظر الاستيلاء على الشاشة).

هناك القليل جدا كس في رأس الوثيقة وبالتأكيد لا شيء يجب أن يكون هذا يؤثر على الكثير من التصميم يتم مضمنة.

هل لدى أي شخص أي أفكار?

على النحو المنشود

نص بديل http://citywest.bangtest.co.uk/stackoverflow/okay.png

التوقعات لعام 2003

نص بديل 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">

نشرة سيتي ويست الإلكترونية

    <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>

هل كانت مفيدة؟

المحلول 3

لقد اكتشفت منذ ذلك الحين أن إصدار Outlook الذي يستخدمه العميل يستخدم محرك التقديم من أي إصدار من IE مثبت.في هذه الحالة، IE6!لقد تم اختبارها منذ ذلك الحين وتعديلها إلى القالب وكلها الآن جيدة.

شكرا لكم الجميع على المساعدة.

نصائح أخرى

يتم تجاهل ورقة أنماطك (وهو السلوك المتوقع في Outlook).تحويل تلك إلى أنماط مضمنة وأنت انتهيت!آخر مرة راجعت، يتجاهل Gmail أيضا أوراق التصميم، لذلك أنت أفضل حالا فقط لا تستخدمها.

إزالة الأنماط للخطوط واستخدام <font> الوسم.على سبيل المثال.

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

تتحول إلى:

<td style="padding-left: 10px; padding-bottom: 5px;" colspan="4"><font color="#ffffff" size="11px"><$description default=''$></font></td>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top