html - para - formato de mensaje de correo electronico
Rich HTML emails en Outlook 2007 y 2010... ¿cómo se elimina el margen superior? (7)
Como outlook no admite margen - referencia . Mi trabajo alrededor de este problema fue el siguiente. Espero que ayude a alguien.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
Tengo un rico correo electrónico HTML. Me preguntaba cómo, en Outlook 2010 y 2007, obtienes la tabla en el diseño para que quede al ras con el borde del navegador?
Echa un vistazo a esta foto:
El rosa es el color de fondo de la etiqueta corporal y el gris es el bg de la tabla. Ambos tienen 0 todo (margen, padding ect). Pero todavía hay algo de espacio. El rosa no debería ser visible.
¿Alguien sabe cómo deshacerse de este espacio en el cuerpo?
También aquí hay algunos CSS para el inicio del correo electrónico:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
¡Aclamaciones!
Con CSS puro (no estoy seguro de que a los creadores de IE les guste leer eso), puede usar !important para forzar el margen y el relleno de <table> y <body> para que sean 0px :
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Quizás funcione, pero tal vez no. No estoy seguro de cómo Outlook maneja CSS ...
De acuerdo, el <body style="padding:0px; margin:0px;"> no funciona.
Encuentro que, con Outlook 2007/2010, si tiene aplicado el padding-top en una columna pero no en las otras columnas en la misma fila, Outlook aplicará ese relleno a todas las columnas por algún motivo. ¿Puedes pegar más del código de correo electrónico para que podamos ver que no es otra cosa lo que está causando el problema?
Intente utilizar margintop="0" marginleft="0" marginright="0" en la etiqueta <body> (actualizado al ejemplo completo):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
Deberá establecer el ancho de 600 en el ancho de su correo electrónico.
Hay errores de cliente de correo cruzado con etiquetas corporales y valores de relleno / margen en CSS.
NB: esto solo es necesario, y solo funciona, en la etiqueta corporal.
Outlook 2007/2010 agrega 15px parte superior / inferior y 10px relleno de cuerpo izquierdo / derecho a todos los correos electrónicos html. No puedes deshacerte de eso.
Aquí hay un truco para falsificar fondos completos: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook usa el motor roto de Microsoft Word HTML y no se basa en ningún parecido razonable con un navegador.
Si tiene Word, al menos puede abrir su correo electrónico como html y ver cómo lo renderiza sin tener que pasar por todo el ciclo de correo.
Outlook realmente en la ruina de cualquier vendedor de correo electrónico. Es una pila absoluta de basura y no es compatible con las expectativas más básicas de CSS.
Tendría que tener muchas discusiones francas y decepcionantes con los diseñadores gráficos sobre las limitaciones del correo electrónico como plataforma debido a Outlook. Microsoft ha dado un paso atrás en el uso del motor de Word para Outlook.
Sé que esto es un poco tarde, pero me encontré con esta publicación y pensé que podrías probar este método también.
"Reparación del relleno forzado del cuerpo en Outlook 2007, 2010 y 2013
Probando un correo electrónico html recientemente con un alto porcentaje de destinatarios que probablemente sean usuarios de Microsoft Outlook, encontré un error en el que no es posible sobrescribir el relleno forzado en las versiones de Outlook (que usan MS Words rendering engine 2007, 2010, 2013) .
Esto estaba rompiendo el diseño y provocaba espacios en blanco no deseados en el margen izquierdo del correo electrónico. Las versiones ofensivas del margen de soporte de Outlook (incluido el margen negativo) solo admiten estilos en línea. Por lo tanto, el fix / hack consiste en envolver todo el correo electrónico en una tabla contenedora y aplicar un margen negativo solo a los clientes problemáticos de correo electrónico, utilizando html ''if statements'' como se muestra a continuación.
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>