css - support - letter spacing html email

En Outlook Outlook, el correo electrónico no funciona.

Question

Quiero este diseño donde tengo una caja rectangular. Y dentro del cuadro de la izquierda hay un texto y a la derecha hay una imagen. Esto se ve bien en el navegador, pero cuando se envía como un correo electrónico html, en apariencia el derecho flotante no parece funcionar. Pone la imagen en la siguiente línea debajo del texto. ¿Alguna idea de cómo hacer que esto funcione? (Estoy tratando de evitar el uso de tablas.)

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

Answer 1

CampaignMonitor proporciona esta guía bastante brillante para todo el soporte de CSS en múltiples clientes de correo electrónico, que también está disponible como descarga de pdf o xls .

Como dicen las respuestas anteriores, el soporte de correo electrónico para CSS es muy limitado, principalmente debido a la decisión de Microsoft de usar Word como su motor de renderizado html .

Answer 2

Cuando está flotando algo a la derecha de algo, el elemento flotante derecho siempre debe aparecer primero en el código. Me gusta esto:

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>

Answer 3

Cuando se trata de renderizar HTML, la mayoría de los clientes de correo electrónico son primitivos y romperán muchos elementos HTML bien formados.

Recomendaría algunos recursos en línea tales como:

Cómo codificar correos electrónicos HTML: MailChimp

Esta discusión de SO puede ser útil:

¿Qué pautas existen para el diseño de correo electrónico HTML?

Answer 4

Esta es una muy buena guía de Mail Chimp on Coding para HTML Emails:

http://kb.mailchimp.com/article/how-to-code-html-emails

Algunos consejos básicos:

• Usa tablas para el diseño.
• Establezca su tabla más ancha para que tenga un máximo de 600 píxeles de ancho.
• No intentes usar JavaScript o Flash
• No use CSS en una etiqueta de estilo ya que algunos clientes de correo la descartarán.
• Utilice únicamente estilos CSS en línea.

Básicamente codifique sus correos electrónicos como si fuera aproximadamente 2003.

Answer 5

He encontrado una manera de aplicar flotante en Outlook.com.
Simplemente escribe en mayúscula la etiqueta como Float: izquierda .

<span style="Float:left;">Content to float</span>

Tal vez deberías usar ! Importante también;
Lo probé y funcionó.

Answer 6

Las imágenes flotantes simples pueden ser como

<img src="yourimage" align="left" />

PERO de esa manera no obtendrá resultados sólidos con el relleno entre el texto y la imagen, Outlook elimina el margen y el relleno y su texto se mantendrá justo al lado de la imagen. Entonces intente esto:

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

Debe envolver un elemento de "tabla" alrededor de él para que el efecto de margen de relleno funcione en Gmail, Outlook (en línea), Microsoft Outlook (cliente de escritorio), ...

Dale a la tabla un atributo de alineación = izquierda o derecha. (Edite la respuesta aquí: además, y el respaldo para otros clientes de correo electrónico también le da un valor flotante a la tabla, así que haga ambas cosas. Son copias de seguridad entre sí. Algunos clientes entienden "flotar", otros entienden "alinear", otros entienden ambos, ...) Su tabla flotará en el texto casi como una imagen. La única diferencia es que, en Outlook, una tabla genera un salto de línea automático en el texto donde una imagen con alineación a la izquierda o a la derecha no genera saltos.

Para establecer el margen, ya que ahora estamos trabajando con una tabla, agregue un "td" adicional con un ancho = "15" a la izquierda o derecha de su celda de imagen y un espacio sin interrupciones en ella. (o un gif transparente -> spacer.gif)

 

Es mejor que no deje las celdas vacías porque, de lo contrario, el ancho de su celda no se respetará en ciertos clientes de correo electrónico.

Para los márgenes superior e inferior podemos usar el atributo ''vspace'', no olvide darle a la imagen un atributo align = left o right. De lo contrario, ''vspace'' no funcionará.

Answer 7

Muy tarde para la conversación, pero aquí es cómo "flotar" en html email usando align="" lugar.

Ejemplo aquí

Además, si está buscando recursos en el correo electrónico html (supongo que es la respuesta que marcó como correcta, es muy general), aquí hay una gran lista de recursos .

Answer 8

echa un vistazo a https://www.campaignmonitor.com/css/ Aquí ha enumerado cuáles son todas las cosas compatibles y no compatibles en el correo electrónico

En lugar de flotar, puede usar una tabla externa y colocar el contenido que desea flotar a la izquierda en la td izquierda de la tabla externa.

Esta no es una respuesta elegante pero lo hice de esta manera