The Emailing Experience

Hay un bug bastante conocido en Gmail y Hotmail en Firefox, que si no lo conoces te puede traer bastantes dolores de cabeza.

Se trata del típico caso de una imagen partida en varios trozos y unidos con estructura de tabla, en el que, a pesar de que la tabla tiene valores cellpadding=”0” , cellspacing=”0” y el estilo border-collapse:collapse, aparece un espacio blanco entre las imágenes. Por ejemplo, queremos enviar un email como este:



Por lo que hemos partido la imagen en varios trozos para poder hacer click en el logo y poner texto en la celda inferior derecha (recuerda que no debemos excedernos en el tamaño de las imágenes). La tabla tiene una estructura así:



Y a la hora de hacer las pruebas en Gmail y Hotmail en Firefox nos encontramos con esto:



Una vez verificado que hemos definido bien los tamaños de las celdas e imágenes, que no se nos han colado espacios ni hay por ahí ningún padding que nos esté influyendo, lo que debemos hacer es añadirle a las imágenes un display:block (ojo, cuando hablamos de email el css debe ir siempre dentro del body comentado) así:

<style type=”text/css”>
<!--
    img {display:block;}
-->
</style>

No obstante, esto sólo lo solucionará en Hotmail, así que para que nuestro truco funcione también en Gmail deberemos ponerle este mismo estilo en línea a cada imagen.

Quedaría  algo así:

<img src=”imagenes/img01.jpg” alt=”Mi imagen” style=”display:block” />

Y así por fin ya se arreglarían todos nuestros males:



¿Qué te parece? ¿Lo has probado? ¿Te ha funcionado bien? Déjanos tu comentario.

Actualización 4/10/2011

Estos días he estado haciendo pruebas de este método para la plantilla de un cliente que requería imágenes recortadas pero unidas (para poner enlaces sin necesidad de hacer un mapa), así que, si aún con display:block; en las imágenes no te funciona bien, prueba a darle a tabla contenedor (la que envuelve todo lo demás) la siguiente regla de css:

  table-layout:fixed;

Ten en cuenta que, al darle esta propiedad a la tabla, los td de su interior van a necesitar un ancho fijo, a no ser que quieras que se repartan el ancho a partes iguales.

Si aún así no te funciona (lo que ya sería muy raro), sigue añadiéndole table-layout:fixed a las sucesivas tablas anidadas.

Por cierto, este truco también funciona en chrome. :-))

Publicaciones relacionadas