Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

gerwalk · #1 (**permalink**) 28/12/2009, 02:53

¡Hola! Espero que esté ubicado en el foro correspondiente

.
Tengo maquetado un newsletter HTML OK (imágenes cortadas, en tablas sin excesivo anidado,
y alojadas en servidor, sin CSS), que es enviado con GroupMail (aunque esto no creo que sea
relevante). Acá va el link al HTML completo (el código fuente lo pongo al final):

[URL="http://www.reef.com.ar/news/dic09/mailnews_12_09.html"]http://www.reef.com.ar/news/dic09/mailnews_12_09.html[/URL]

Dicho newsletter es recibido y leido correctamente en Gmail, Yahoo, Outlook, Thunderbird.
El problema es al abrirlo con Hotmail, puesto que si no es bajo Explorer, no lo
despliega correctamente, mostrando una separación de 3px bajo cada celda

.
Suena complicado quizás, adjunto imagen:

He recorrido Google y foros, pero no he encontrado solución. He desmenuzado e impreso
el código fuente de varios newsletter, para descubrir que en algunos, ésto no es solucionado,
sino que remendado mediante el diseño

.
Más allá de que esto último es una opción válida a futuro (el diseño no es mío en este caso)
quisiera saber si alguien ha visto este error con anterioridad, y sobre todo alguna forma
de solucionarlo.
El código, como verán, es bastante simple, sin rarezas.

Bueno, gracias de antemano, ¡y saludos!

Gerwalk!

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:REEF News - Diciembre 2009:.</title>
</head>

<body>
<h4 align="center">Si no podés ver el Reef News, clikeá <a href="http://www.reef.com.ar/news/dic09/news_12_09.html">acá</a></h4>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <caption>
  </caption>

  <tr>
    <th height="72" colspan="2" scope="col"><a href="http://www.reef.com.ar/"><img src="http://www.reef.com.ar/news/dic09/img2/a.jpg" width="800" height="72" border="0" /></a></th>
  </tr>
  <tr>
    <td width="482" height="160"><img src="http://www.reef.com.ar/news/dic09/img2/b1.jpg" width="482" height="160" border="0" /></td>
    <td width="318" height="160"><img src="http://www.reef.com.ar/news/dic09/img2/b2.jpg" width="318" height="160" border="0" /></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>

    <td width="482" height="210"><table width="482" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="165" height="92"><img src="http://www.reef.com.ar/news/dic09/img2/c1a.jpg" width="165" height="92" /></td>
        <td width="155" height="92"><img src="http://www.reef.com.ar/news/dic09/img2/gif1reef.gif" width="155" height="92" /></td>
        <td width="162" height="92"><img src="http://www.reef.com.ar/news/dic09/img2/c1c.jpg" width="162" height="92" /></td>
      </tr>
      <tr>
        <td width="165" height="21"><img src="http://www.reef.com.ar/news/dic09/img2/c1d.jpg" width="165" height="21" /></td>
        <td width="155" height="21"><a href="http://www.reef.com.ar/news/dic09/accesorios.html"><img src="http://www.reef.com.ar/news/dic09/img2/c1e.jpg" width="155" height="21" border="0" /></a></td>

        <td width="162" height="21"><img src="http://www.reef.com.ar/news/dic09/img2/c1f.jpg" width="162" height="21" /></td>
      </tr>
      <tr>
        <td height="97" colspan="3"><img src="http://www.reef.com.ar/news/dic09/img2/c1g.jpg" width="482" height="97" /></td>
      </tr>
    </table></td>
    <td width="318" height="210"><table width="318" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="68" colspan="2"><img src="http://www.reef.com.ar/news/dic09/img2/c2a.jpg" width="318" height="68" /></td>

        </tr>
      <tr>
        <td width="177" height="121"><img src="http://www.reef.com.ar/news/dic09/img2/gif2reef.gif" width="177" height="121" /></td>
        <td width="141" height="121"><img src="http://www.reef.com.ar/news/dic09/img2/c2c.jpg" width="141" height="121" /></td>
      </tr>
      <tr>
        <td width="177" height="21"><a href="http://www.reef.com.ar/news/dic09/store.html"><img src="http://www.reef.com.ar/news/dic09/img2/c2d.jpg" width="177" height="21" border="0" /></a></td>
        <td width="141" height="21"><img src="http://www.reef.com.ar/news/dic09/img2/c2e.jpg" width="141" height="21" /></td>
      </tr>

    </table></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="800" height="32"><img src="http://www.reef.com.ar/news/dic09/img2/d.jpg" width="800" height="32" /></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="160" height="128" rowspan="2"><img src="http://www.reef.com.ar/news/dic09/img2/e1.jpg" width="160" height="128" /></td>

    <td width="157" height="128" rowspan="2"><img src="http://www.reef.com.ar/news/dic09/img2/gif3reef.gif" width="157" height="128" /></td>
    <td width="315" height="113" bgcolor="#CFBE28"><img src="http://www.reef.com.ar/news/dic09/img2/e3.jpg" width="315" height="113" border="0" /></td>
    <td width="168" height="128" rowspan="2" bgcolor="#CFBE28"><img src="http://www.reef.com.ar/news/dic09/img2/e5.jpg" width="168" height="128" /></td>
  </tr>
  <tr>
    <td width="316" height="15" bgcolor="#CFBE28"><a href="http://www.reef.com.ar/news/dic09/coleccion_09_10.html"><img src="http://www.reef.com.ar/news/dic09/img2/e4.jpg" width="315" height="15" border="0" /></a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>

    <td height="40" colspan="5"><img src="http://www.reef.com.ar/news/dic09/img2/f1.jpg" width="800" height="40" /></td>
  </tr>
  <tr>
    <td width="195" height="28"><img src="http://www.reef.com.ar/news/dic09/img2/f2.jpg" width="195" height="28" /></td>
    <td width="193" height="28"><a href="http://www.reef.com.ar"><img src="http://www.reef.com.ar/news/dic09/img2/f3.jpg" width="193" height="28" border="0" /></a></td>
    <td width="142" height="28"><a href="http://www.reefclassicmag.com"><img src="http://www.reef.com.ar/news/dic09/img2/f4.jpg" width="142" height="28" border="0" /></a></td>
    <td width="74" height="28"><a href="http://www.facebook.com/people/Reef-Argentina/554709177"><img src="http://www.reef.com.ar/news/dic09/img2/f5.jpg" width="74" height="28" border="0" /></a></td>
    <td width="196" height="28"><img src="http://www.reef.com.ar/news/dic09/img2/f6.jpg" width="196" height="28" /></td>
  </tr>

  <tr>
    <td height="23" colspan="5"><img src="http://www.reef.com.ar/news/dic09/img2/f7.jpg" width="800" height="23" /></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Xente · #2 (**permalink**) 20/01/2010, 04:03

Hola,

¿Has podido solucionarlo? Me pasa exactamente el mismo problema y ya no se ni como ni donde mas buscar.

Un saludo y gracias

Xente · #3 (**permalink**) 20/01/2010, 06:23

Ya esta claro, hay que añadir a las etiquetas <img> el atributo "display:block"

Un saludo

gerwalk · #4 (**permalink**) 18/02/2010, 20:56

Perdón por la demora en leerlo, muchas gracias! Ahora estoy metido en otro proyecto, pero en cuanto pueda lo probaré.

Saludos!

estudioplateado · #5 (**permalink**) 13/07/2010, 07:39

La solución es sencilla basta con incluir la propiedad CSS display:block a cada etiqueta <img> dentro de tus tablas:

<img style="display: block;" src=".......">

Es importante que incluyas la propiedad CSS individualmente (inline) para cada una de tus etiquetas, pues algunos gestores de correos se ponen pesados con las etiquetas <style> incluso hay algunos que eliminan todo lo que está antes y después de <body></body>

Saludos