html - supported - el relleno de CSS no está funcionando en outlook

title html css

Question

Tengo el siguiente html en la plantilla de correo electrónico.

Obtengo una vista diferente en MS Outlook y en Gmail para la misma.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

¿Cómo arreglar esto?

Answer 1

Cambié a seguir y funcionó para mí

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

La actualización basada en Bsalex solicita lo que realmente ha cambiado. Reemplacé la etiqueta span

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

con etiquetas de tabla y td como las siguientes

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

Answer 2

Como dice monners, algunos clientes de correo electrónico son almohadillas de manejo horribles. Puede usar filas y celdas vacías como sugiere (con la precaución de establecer la altura de línea en 1, si no la altura de línea de la td puede ser mayor que el relleno).

He encontrado particularmente otra solución, usando bordes del mismo color del fondo. He probado esta solución de forma positiva en gmail (y gmail para empresas), correo yahoo, Outlook web, Outlook de escritorio, Thunderbird y funciona correctamente.

Ejemplo:

<table>
    <tr>
        <!--use border same color of bg-->
        <td style="border: solid 10px #ffffff">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--Same result with padding-->
<table>
    <tr>
        <!--use paddings-->
        <td style="padding: 10px 10px 10px 10px">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--using empty td/tr-->
<table>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td width="10" style="width: 10px; line-height: 1px"></td>
        <td>
           <!--Content goes here-->
        </td>
        <td width="10" style="width: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
</table>

Además, he aquí una guía excelente para hacer boletines informativos receptivos SIN mediaqueries, llevo usando esta guía por mucho tiempo y es excelente: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Y puede probar todos sus correos electrónicos en: https://putsmail.com/

Y siempre recuerde hacer su CSS en línea, yo uso: https://inliner.cm/

Finalmente, si tiene dudas sobre el soporte de CSS, puede ir aquí: https://templates.mailchimp.com/resources/email-client-css-support/

o aquí: https://www.campaignmonitor.com/css/

Answer 3

Desafortunadamente, cuando se trata de EDM, Outlook es tu peor enemigo. Algunas versiones no respetan el relleno cuando el contenido de una celda dicta las dimensiones de la celda.

El enfoque que le dará el resultado más consistente a través de los clientes de correo es usar celdas de la tabla vacía como relleno (lo sé, el horror), pero recuerde llenar esas tablas con una imagen en blanco de las dimensiones deseadas porque, lo adivinó, algunas versiones de Outlook no respetan declaraciones de altura / ancho de celdas vacías.

¿No son divertidos los EDM? (No, ellos no son.)

Answer 4

Después de hacer muchas pruebas en Litmus, no pude encontrar una forma de tener un renderizado perfecto en todos los lectores de correos electrónicos, pero esta es la mejor solución que encontré:

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

En este fragmento de código, mi objetivo era emular el relleno: 6px 12px;

Hay 2 columnas de tabla 12px que manejan el relleno derecho e izquierdo.

Y estoy usando "relleno: 6px 0;" en mi contenido td, para administrar el relleno superior e inferior: Outlook 2010 y 2013 lo ignorarán y usarán su propio relleno.

El texto no estará perfectamente alineado en Outlook 2010 y Outlook 2013 (ligeramente demasiado lejos de la parte superior) pero funciona con todos los demás lectores de correo electrónico que intenté: Apple Mail, Gmail, Outlook 2011 (sí ...), Hotmail, Yahoo y muchos otros. Más.

Imagen de vista previa: vista previa de Outlook 2010 y 2013

Imagen de vista previa: Gmail, Apple Mail y otros

Answer 5

El relleno no funcionará en Outlook. En lugar de agregar una imagen en blanco, puede simplemente usar varios espacios ( & nbsp; ) antes de los elementos / textos para el relleno restante Para el relleno superior o inferior, puede agregar un div que contenga solo espacios ( & nbsp; ) solo. ¡Esto funcionará!

Answer 6

Haz esto en su lugar:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

Es mejor usar dos celdas y alinear el contenido, que usar un relleno grande y   es

Answer 7

Mi solución es usar un vacío / lo que sea necesario con un gif transparente de espaciador, ya que el relleno no es 100% compatible.

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>

Answer 8

Para crear HTML en la plantilla de correo electrónico que es emailer / newsletter, el relleno / margen no es compatible con los clientes de correo electrónico. Puedes tomar el tamaño 1x1 de la imagen gif en blanco y usarla.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

Answer 9

Solo usa
<Table cellpadding="10" ..> ... </Table>
No use px.Works en MS-Outlook.

Answer 10

Todo el diseño, incluido el relleno, debe agregarse a un td, no a un tramo.

Otra solución pone el texto en <p>text</p> y define los márgenes, y eso debería dar el relleno requerido.

Por ejemplo:

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>

Answer 11

Tuve el mismo problema y terminé usando border lugar de padding .

Answer 12

has intentado display:inline-block; ?