Espacio en blanco de imagenes dentro de una tabla en Hotmail

Por si el problema de la compatibilidad de navegadores con CSS y HTML no fuera suficiente, los clientes y servicios de email también son todo un viacrucis.

En gelattina hacemos campañas de email marketing y hace tiempo nos dimos cuenta de que Hotmail agrega un espacio entre cada celda de una tabla, lo que le resta look al diseño del email.

Después de estar buscando sin hallar resultados, se me ocurrió la brillante idea de cortar y exportar el diseño del email desde Fireworks para ver si me daba alguna pista. Dicho y hecho, revisando el código, encontré un bloquecito CSS que soluciona el problema:

td img {
display: block;
}

¿Qué cosas no?

BTW… si creías que en nuestros estandarizados tiempos ibas a empezar a ver una cooperación de parte de Microsoft y otras empresas en cuanto a la estandarización de sus parsers, siento decepcionarte, Microsoft va para atrás con su Outlook 2010.

About Jesús Sánchez

Nací en un pueblito casi en la costa de Oaxaca, México, en el lluvioso mes de julio de 1987. Desde 2002 vivo en Monterrey, Nuevo Léon, México.

Soy desarrollador web, experto en CSS+XHTML, programador PHP, ASP, bloggero, twittero, flickero, mi gran pasión, admeás de la tecnología, es el futbol, le voy al América y al que no le guste que se vaya a leer alt1040.
This entry was posted in Desarrollo Web, Email, Software and tagged , , , , , . Bookmark the permalink.

4 Responses to Espacio en blanco de imagenes dentro de una tabla en Hotmail

  1. Alberto says:

    Pero si desde la versión 2007 la gente esta pidiendo que cambien el motor!!
    Saludos.

  2. Diego says:

    Huyyy que buen aporte, yo tambien tenia problemas con hotmail y gracias a este truco se soluciono, gracias por la ayuda.

  3. Oswaldo says:

    Excelente detalle, gracias

  4. Martin says:

    Me estaba volviendo loco para solucionarlo y lo solucioné con tu post.
    Muchas gracias!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>