Emails generated with tables to be sent by mail embed blank spaces between the images

Navigation
1

When I generate a html with tables to send it by mail in gmail app for android it always puts spaces between the images.

The rest of the mail managers work correctly for me, including the following in the table: 

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

Does anyone know of any solution?

Please, do not put display="block" in the images that does not work anymore.

HTML Code: 

<!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>
    
asked by Carlos Garrido Vigo 08.06.2017 в 16:46
source

2 answers

0

In the end looking and searching I have found a possible solution. Include these styles on the page in the 

<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;
}
p {
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: none;
}
table {
    border-collapse: collapse;
}
table td {
    border-collapse: collapse;
}
</style>
    
answered by 05.12.2017 в 13:00
0

Solved. What you need to do is include the image within a paragraph with the following styles: 

<td style="font-size:0;line-height:0;">
<p style="margin:0;font-size:0;line-height:0;">
    <a href="#" target="_blank"><img style="display:block;" src="http://servidor.com/imagen.png" width="650" height="296" alt="" border="0">
    </a>
</p>
</td>
    
answered by 04.01.2018 в 15:34
How to pass parameters to a directive from a controller? AngularJS Error sending email with android