1

Cuando genero un html con tablas para enviarlo por correo en gmail app para android siempre me mete espacios entre las imágenes.

En el resto de gestores de correo me funciona correctamente incluyendo en la tabla lo siguiente:

border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
font-size:1px;
line-height:0;
mso-margin-top-alt:1px;

¿Alguien conoce alguna solución?

Por favor, que no sea la de poner display="block" en las imágenes que eso ya no funciona.

Código HTML:

<!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">
<link rel="shortcut icon" href="" />
<title>Grandes profes grandes iniciativas</title>
</head>
<body> 
<!-- AVISO PUBLICIDAD -->
<table align="center" id="top" cellspacing="0" cellpadding="0" width="700" border="0">
    <tbody>
    <tr>
        <td style="padding-bottom:5px;"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Si no ves correctamente la newsletter, haz click </font> <font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b><a href="url_redirect" style="text-decoration: underline;color:#000000;" target="_blank">aqu&iacute;</a></b></font></td>
    </tr>
    </tbody>
</table>
<!-- FIN AVISO PUBLICIDAD -->
<table align="center" width="700" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;font-size:1px;line-height:0;mso-margin-top-alt:1px;">
    <tr>
        <td><a href="url" target="_blank"><img src="imagen" width="700" height="103" alt="" border="0"></a></td>
    </tr>
    <tr>
        <td><img src="imagen" width="700" height="681" alt="" border="0"></td>
    </tr>
    <tr>
        <td><a href="https://twitter.com/search?f=tweets&vertical=default&q=%23GrandesIniciativas&src=typd" target="_blank"><img src="imagen" width="700" height="43" alt="" border="0"></a></td>
    </tr>
</table>
</body>
</html>
4
  • ¿Puedes añadir un ejemplo del HTML del email?
    – Alvaro Montoro
    Commented el 8 jun. 2017 a las 16:38
  • Gracias. Me llevo peleando durante semanas. He intentado ver como lo hace Litmus PutsMail pero el código resultante no incluye nada especial, sin embargo, los envíos salen perfectos. Commented el 9 jun. 2017 a las 12:51
  • Gracias por añadir el código. Ahora no estoy en un ordenador donde pueda hacer tests, pero luego lo pruebo más tarde... o igual alguien consigue ayudarte antes :)
    – Alvaro Montoro
    Commented el 9 jun. 2017 a las 12:53
  • De nuevo muchas gracias. Es un placer encontrar gente como tú. Un saludo Commented el 9 jun. 2017 a las 12:54

2 respuestas 2

0

Al final buscando y buscando he encontrado una posible solución. Incluir estos estilos en la página en el

<style type="text/css">
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
.ExternalClass * {
    line-height: 100%;
}
img {
    margin: 0px;
    padding: 0px;
    display: block;
}
a img {
    margin: 0px;
    padding: 0px;
    display: block;
}
div {
    margin: 0;
    padding: 0;
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
    padding-block-start:0;
    padding-block-end:0;
    padding-inline-start:0;
    padding-inline-end:0;  
}
p {
    margin: 0;
    padding: 0;
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
    padding-block-start:0;
    padding-block-end:0;
    padding-inline-start:0;
    padding-inline-end:0;  
}
html {
    -webkit-text-size-adjust: none;
}
table {
    border-collapse: collapse;
}
table td {
    border-collapse: collapse;
}
</style>
0

Solucionado. Lo que hay que hacer es incluir la imagen dentro de un párrafo con los siguientes estilos:

<tr>
    <td style="font-size:0;line-height:0;">
        <div style="margin:0;font-size:0;line-height:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-block-start:0;padding-block-end:0;padding-inline-start:0;padding-inline-end:0;">
                <p style="margin:0;font-size:0;line-height:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-block-start:0;padding-block-end:0;padding-inline-start:0;padding-inline-end:0;"><a href="https://fundacion.atresmedia.com/nuestros-proyectos/mejora-educativa/grandes-profes/grandes-iniciativas/" target="_blank"><img style="display:block !important;line-height:0 !important;font-size:0 !important;" src="http://servidor.com/imagen.png" width="650" height="296" width="650" height="250" alt="" border="0"></a>
                </p>
        </div>
    </td>
</tr>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.