1

Estoy creando un HTML con estilos CSS para enviar un correo desde asp.net, el problema es que al llegar el correo en Outlook no respeta los estilos, ya he intentado ponerlos embebido en el html, en linea con las tags y con un archivo css externo pero no lo hace. ¿Alguien tiene idea de porque sucede esto y que puedo hacer para solucionarlo?

Por Ejemplo: Tengo este código en el html con estilos css en linea:

 <p margin="0px" padding="0px" font-size="12px" font-family="Arial">
     <a href="mailto:[email protected]" text-decoration="none !important" color="#02a1d3 !important">[email protected]</a>
  </p>

y en el outlook cuando recibo el correo no me respeta los estilos y me coloca esto:

outlook_mail

3
  • Sin ver tu código es difícil saber qué puede estar mal en la plantilla. Te invito a tomar el recorrido de bienvenida y ver Cómo preguntar
    – ffflabs
    Commented el 7 dic. 2017 a las 23:26
  • Tiene que estar todo dentro del mismo archivo pero mete el css en el mismo html con el atributo style="", por que asi lo pongas en la cabecera con las etiquetas <style></style> en el mismo archivo, no funcionara, tienes que poner uno por uno en cada etiqueta. Commented el 7 dic. 2017 a las 23:36
  • listo, he editado mi pregunta :) Commented el 7 dic. 2017 a las 23:39

4 respuestas 4

2

La forma adecuada para construir un html que funcione en un email es usando tablas, no divs o cualquier otro tag.

Siempre me acuerdo del TA-TR-TD como un ciclo. Primero una TAbla, luego una fila TR y luego una columna TD. Y vuelve a empezar.

En el ejemplo que planteas podria ser algo asi

<!-- CENTER THE EMAIL // -->
<center style="background-color:#E1E1E1;">
  <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
    <tr>
      <td align="center" valign="top" id="bodyCell">
        <a style="color:#FFFFFF;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:135%;" href="mailto:[email protected]" target="_blank">[email protected]</a>
      </td>
    </tr>
  </table>
  <!-- // CONTENT TABLE -->

Puedes variar colores de fuentes y margenes directamente en la tabla, o usar style como sugiere amenadiel.

Es importante comprender que outlook y en general los clientes de correo no ven lo mismo que un navegador a la hora de definir el formato del contenido. Están optimizados o (segun mi opinion) se quedaron en el tiempo y no evolucionaron a la velocidad que si lo hizo el html5.

Ojala está informacion sea de tu utilidad.

1

Para solucionar o detectar bien estos problemas deberías revisar las siguientes cosas de tu plantilla HTML de correo:

1.- Nunca utilices el css desde un archivo externo, por ejemplo desde la cabecera de tu plantilla no debes llamar a un <link rel="stylesheet" href="" />.

2.- Tu documento HTML NO debe ser de tipo html 5 debes ocupar la cabecera de html 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.- En tu tag html debes agregar lo siguiente <html xmlns="http://www.w3.org/1999/xhtml">

4.- Solo limítate a ocupar css antiguo no CSS3

5.- Tu css debe estar dentro de las etiquetas <style> en el mismo documento.

6.- Para maquetar solo utiliza tablas un div lo puedes ocupar de vez en cuando, pero lo recomendable es usar tablas.

En vez de reinventar la rueda, te recomiendo que leas sobre este tema, ya que actualmente hay frameworks que tienen diseños de email incluidos, como por ejemplo foundations for emails, que te hará la vida mucho mas fácil.

Si despues de todo esto sigues con problemas, debes revisar tu logica del servicio de email para ver si tienes activado la opcion de html.

Si sigues con el problema no dudes en preguntar, ya que tuve el mismo problemas.

0

Los atributos de estilo se dan dentro del atributo style

    <p style="margin:0px;padding:0px;font-size:12px;font-family:Arial">
       <a href="mailto:[email protected]" style="text-decoration:none !important; color:#02a1d3 !important">[email protected]</a>
    </p>

Según lo que dicen en outlook-software-strips-out-the-inline-css-in-emails es un problema frecuente que outlook no trate el CSS Inline de manera estándar. En ese mismo link aparecen algunas mitigaciones. Pero nunca se verá exactamente igual que en gmail.

4
  • ya he intentado eso y aun asi continuo obteniendo el mismo resultado, intente enviarme el correo a gmail y si respeta los estilos, por lo que creo que el problema es outlook. ¿Sabes si se requiere alguna configuracion extra para outlook? Commented el 7 dic. 2017 a las 23:50
  • Aparentemente sí hay que tratar distinto a Outlook: stackoverflow.com/questions/33954831/…
    – ffflabs
    Commented el 7 dic. 2017 a las 23:53
  • Excelente, ¿Puedes editar tu respuesta para marcarla como buena?, me sirvió el link que me enviaste Commented el 8 dic. 2017 a las 0:28
  • No es propiamente una solución, pero me alegra haber ayudado
    – ffflabs
    Commented el 8 dic. 2017 a las 0:33
0

por ejemplo el text decoration debe ir en el estilo

 style='color:#838383; text-decoration:none;'

pero no basta con eso, debes documentarte acerca de los estilos que Outlook acepta, te recomiendo https://litmus.com/ puedes testear tus correos antes de enviarlo, outlook, gmail, hotmail 2003, 2009 etc, es genial

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.