CODEWITHSUNDEEP
cssoutlookhtml-email
Barleby
Barleby

Reputation: 688

1px gap between 2 tables in OUTLOOK 2013

I have 2 left-aligned tables in my HTML (purpose RESPONSIVE Email HTML). Outlook is stacking them just for 1 miserable pixel i can not remove. The 2 images are identical (for testing reasons). But Outlook is inserting 1 pixel on the left border of the 2nd table for any unknown reason.

I give up!. Can anyone figure how to remove it in order to that the 2 tables fit in the parent table and therefore don't stack from up to bottom?

Outlook sample

HTML Code es here (I attach image from received email in Outlook, as in browsers TABLEs yes do fit correctly): https://jsfiddle.net/pzamxm9c/#&togetherjs=4x0GFwld1q

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
table {border-collapse: collapse; margin:0;padding:0;mso-table-lspace:0pt; mso-table-rspace:0pt;}
</style>
</head>

<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
 <tr>
 <td align="left">
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
 </td>
 </tr>
 </table>
</body>
</html>

Upvotes: 0

Views: 1090

Answers (4)

St.G
St.G

Reputation: 454

You can use Outlook "ghost columns" to contain the side-by-side tables:

<!--[if (gte mso 9)|(IE)]>
    </td><td align="left">
<![endif]-->

This targets all of the Outlooks except Outlook.com.

Upvotes: 2

Bidstrup
Bidstrup

Reputation: 1617

Outlook will 95% of the times add an extra 1-2px in width of the <table> if its side-by-side with another <table>. The best solution is to wrap them in <td>'s.

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
body {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

@media (max-width: 600px) {
*[class].w320 {
    width: 320px !important;
}
*[class].break {
    display: block !important;
}
*[class].break img {
    width: 100% !important;
    height: auto !important
}
}
</style>
</head>
<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" class="w320" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
  <tr>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0" /></td>
        </tr>
      </table>
    </td>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0"/></td>
        </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Barleby
Barleby

Reputation: 688

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
</style>
</head>

<body style="font-size:0px; line-height:0px;">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
  <tr>
  <td align="left">
    <table align="left" width="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" bgcolor="#FFFFFF" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;"><p style="mso-table-lspace:0;mso-table-rspace:0;font-size:0px;line-height:0px;"> <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="290" style=" border: 0px none;" border="0" /> </p></td>
        </tr>
      </table>
    <!--[if gte mso 9]>
    </td>
    <![endif]--> 

    <!--[if gte mso 9]>
    <td align="left">
    <![endif]-->      
    <table align="left" width="290" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" bgcolor="#FFFFFF" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;"><p style="mso-table-lspace:0;mso-table-rspace:0;font-size:0px;line-height:0px;"> <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="290" style=" border: 0px none;" border="0" /> </p></td>
        </tr>
      </table>        
  </td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

Try not giving any space between the two tables:

</table><table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">

Or:

</table><!--
--><table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">

Upvotes: 0

Related Questions