Outlook 2003 excluyendo la decoración del texto - HTML de Correo electrónico

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

Pregunta

Estoy teniendo algunos problemas con un cliente mío.He construido (no diseñados) una plantilla de correo electrónico para usar con Crear/Enviar.He utilizado el diseño de pruebas de servicio de Crear/Enviar y todo es mirar como se pretende.Sin embargo, cuando el cliente ve el correo electrónico en Outlook 2003, el formato del texto es que faltan (vea la pantalla agarra).

Hay muy poco de CSS en la sección head del documento y, ciertamente, nada de lo que debería tener este efecto tanto de que el estilo se hace en línea.

¿Alguien tiene alguna idea?

Como la intención de

texto alt http://citywest.bangtest.co.uk/stackoverflow/okay.png

OutLook 2003

texto alt 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">

La ciudad de West e-Boletín

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

¿Fue útil?

Solución 3

Desde entonces descubrí que la versión de Outlook que el cliente ha usado el motor de renderizado de cualquier versión de IE está instalada.En este caso es IE6!Desde entonces, he probado e hice enmiende a la plantilla y todo es ahora bueno.

Gracias a todos por usted ayuda.

Otros consejos

Se está ignorando su hoja de estilo (que es el comportamiento esperado en Outlook).¡Convierte los de los estilos en línea y que hayas terminado!La última vez que revisé, Gmail también ignora las hojas de estilo, por lo que está mejor simplemente no usarlas.

Quitar los estilos de las fuentes y el uso de la <font> de la etiqueta.E. g.

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

Se convierten en:

<td style="padding-left: 10px; padding-bottom: 5px;" colspan="4"><font color="#ffffff" size="11px"><$description default=''$></font></td>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top