Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera en el foro de Diseño web en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 28/12/2009, 02:53
 
Fecha de Ingreso: diciembre-2009
Mensajes: 2
Antigüedad: 8 años
Puntos: 0
Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

¡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>
  #2 (permalink)  
Antiguo 20/01/2010, 04:03
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

Hola,

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

Un saludo y gracias
  #3 (permalink)  
Antiguo 20/01/2010, 06:23
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

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

Un saludo
  #4 (permalink)  
Antiguo 18/02/2010, 20:56
 
Fecha de Ingreso: diciembre-2009
Mensajes: 2
Antigüedad: 8 años
Puntos: 0
Respuesta: Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

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

Saludos!
  #5 (permalink)  
Antiguo 13/07/2010, 08:39
Avatar de estudioplateado  
Fecha de Ingreso: diciembre-2009
Mensajes: 71
Antigüedad: 8 años
Puntos: 2
Respuesta: Newsletter HTML se muestra con errores en Hotmail+Firefox/Opera

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:28.