I have a table with border-left and border-right but in one section of the table it is not being applied. The table border was displaying just fine when I had a few other nested tables within. When I removed them to simplify the box, the border suddenly wouldn't apply to the bottom right corner.
Here's an image:
And here's my code:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td colspan="3" style="text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Why choose us?
</td>
</tr>
<tr>
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px;">
1-800-YUP-1999
</td>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px; padding-right: 15px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">E-mail us</a>
</td>
<td colspan="2" style="padding-bottom: 5px;">
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 0px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table>
<!-- End Info Box -->
The td in question:
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
is not having a right border. Add it, then it works.
Without:
https://jsfiddle.net/j5ctrrh0/
With:
https://jsfiddle.net/j5ctrrh0/1/
This is because you are using border-collapse:collapse; on the middle table. The inner table, on which you set border="0" will now collpase with the existing border, thus removing it. See here (removed collapse, changed border of the inner table to 1 so you can see, where the borders will collapse):
https://jsfiddle.net/j5ctrrh0/2/
so, with full collapsing and border=0 on the inner table, you need to set the border on the respective td.
However, iirc it is recommended to use collapse for html-emails.
Related
Occasionally, I get notified of issues from clients that the HTML email signature I created for them is collapsing upon itself in the default Apple Mail app on iOS.
This tends to only occur when I implement multiple tables on top of each other, which is necessary for designs such as the one below in order to ensure one of the tables has a complete background color, with no hairlines of white in between table cells.
Anyway, what seems to happen is the tables collapse upon each other, but I can't replicate the issue on my iPad 3 running iOS 9.3.5, which is the only Mac device I own and can test installing and sending from (I use Email on Acid to test receiving on multiple devices and platforms).
Below is an example of the issue and the underlying code... Any help would be greatly appreciated... Thanks!
How it should look vs how it sometimes looks from Apple Mail on iOS:
And here's the code for this example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="130" rowspan="4" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
</tr>
<tr>
<td width="295" style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;" width="50"></td>
</tr>
<tr>
<td width="295" valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span>
</td>
</tr>
<tr>
<td width="295" valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;">
<div nowrap style="white-space: nowrap;">
<span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com
</div></td>
</tr>
<tr>
<td width="130" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
<td width="295" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" height="46" bgcolor="#00aeef" valign="middle" rowspan="2" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td width="175" height="23" bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165">
</td>
</tr>
<tr>
<td width="210" height="23" bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td width="425" colspan="2" height="5" bgcolor="#3a3a3c" style="background-color: #3a3a3c; font-size: 5px; line-height: 5px;"> </td>
</tr>
</tbody>
</table>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;">
<img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table>
</body>
</html>
Like i said in my above comment, you are using heights on td's, rowspan and colspan. Try to stay away from them. I have recoded bits and pieces of your HTML and added a few more things.
<table width="425" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="120" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
<td width="295" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;"></td>
</tr>
<tr>
<td valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span></td>
</tr>
<tr>
<td valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;"><div nowrap style="white-space: nowrap;"> <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" bgcolor="#00aeef" valign="middle" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td bgcolor="#00aeef" align="left" valign="top" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00aeef" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Hope this works for you.
For our company I'm creating emailsignatures (using an html code in Cloudpages for work), it works perfectly fine in gmail & Apple mail, but when you open an email in Outlook (send from Gmail in browser or Apple mail) blue lines appear around the picture.
How can I remove those blue lines?
printscreen blue lines
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly;" valign="bottom">$!photoUrl$!photoUrl<img src="$!photoUrl" alt="Foto" width="132" height="160" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<table style="width: 275px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;" align="left" valign="top" width="140">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"><span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important; color: #000001;"> <span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"> <!-- START NAAM --> <strong style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$personalName $personalSurname</strong><br /><em style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$orgJobTitle</em><br /><br /> <!-- EINDE NAAM --> </span> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 107px;" align="left" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/logo-vka.gif" alt="Logo VKA" width="107" height="54" /></td>
</tr>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;"><span style="text-decoration: none; color: #000001;"> <!-- START TELEFOON --> #if ($phoneMobile !="")<span style="color: #000001 !important;"><span style="color: #000001;">M $phoneMobile</span></span>#end <br /><span style="color: #000001 !important;"><span style="color: #000001;">T +31 79 368 10 00</span></span><br /> <a style="color: #000001 !important;" href="https://www.vka.nl/?utm_source=emailhandtekening" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">www.vka.nl</span></span></a> <!-- EINDE TELEFOON --> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 70px;" align="left" valign="bottom"><!-- START SOCIAL MEDIA -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 34px;"><a title="LinkedIn" href="$!linkedin"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-linkedin.gif" alt="LinkedIn" width="34" height="28" border="0" /></a></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 73px;"><a title="Twitter" href="$!twitter"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-twitter.gif" alt="Twitter" width="34" height="28" border="0" /></a></td>
</tr>
</tbody>
</table>
<!-- EINDE SOCIAL MEDIA --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0; height: 18px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="18" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0; height: 32px;" align="left">
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="top" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-boven.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td class="gelebalk" style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; text-align: center; padding: 0;" align="center"><!-- START LINK -->
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; font-weight: bold;"><a style="text-decoration: underline; color: #000001 !important;" href="https://www.vka.nl/privacy-podcast/?utm_source=emailhandtekening&utm_medium=vka" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">Ontdek onze Privacy Podcast in iTunes</span></span></a></p>
<!-- EINDE LINK --></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; width: 8px; background-color: #f6db30; padding: 0;" align="left" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="bottom" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-onder.gif" alt="" width="8" height="8" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="color: #ffffff;"><br /><br />.</p>
You're not seeing blue lines, I think you're seeing tiny blue text. What you're seeing is a very tiny version of this: $!photoUrl$!photoUrl. I think Outlook is ignoring the font-size:0; and possibly not processing the second URL you are adding to your code before the image.
You didn't post all of your code, but what you did post has a few issues. You didn't close the table, you didn't close the href you started before the image.
To make your table function better in Outlook, I added a few style classes that help make Outlook display a table in a better manner: border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;.
I added a style attribute display: block; which helps Outlook better display an image.
Try this code instead:
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="font-size: 0; mso-line-height-rule: exactly; line-height: 0 !important; border-collapse: collapse;" valign="bottom">
<a href="$!photoUrl" target="_blank">
<img src="$!photoUrl" alt="Foto" width="132" height="160" border="0" style="display: block;" />
</a>
</td>
</tr>
</tbody>
</table>
Let me know the results.
Good luck.
I managed to get rid of the blue line by adding text-decoration:none in the parent element.
Before:
<p>
<img src="..." />
<p>
After
<p style="text-decoration:none;">
<img src="..." />
</p>
I have an issue with excess padding appearing around either the table or image on mobile with a HTML email signature and I'm unable to find the solution.
I must of tried every single solution I have researched including:
Adding display:block to the image
Adding a line-height: 1px to the td
Adding font-size: 0; to the td
Making sure every section had padding: 0; and margin: 0;
Adding cellpadding="0" and cellspacing="0" to all tables, tr and td elements
Adding width and height to the table and td (which didn't have any effect)
Adding float: left and align="left"
Adding table-layout:fixed;
Adding border: 0; border-spacing: 0; and border-collapse; on elements
The issue seems to appear on Samsung and iPhone devices that I have tested.
Any new suggestions would be appreciated.
The image that specifically has extra spacing is here:
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
</tr>
</table>
How here is the entire code as I have two tables side by side which may be the cause of the issue:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #00001b;
text-decoration: underline;
}
table {
padding: 0;
margin: 0;
display: block;
}
</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
</body>
</html>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<table align="left" cellpadding="0" cellspacing="0" border="0" width="180">
<tr>
<td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
</tr>
</table>
</td>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
<tr>
<td style="text-align: left;padding:0 0 0 25px;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
You may want to add a </td><td> between your two tables. I've also moved the 25px padding to the left of the copy, rather than the image. (I've assumed the img dimensions here). This looked ok on my EoA previews, if it doesn't help could you post a screenshot of your issue?
Code it like an email! Try the hybrid method! This method allows you to cater for outlook email clients and the use of divs means you dont have to worry about the extra gaps.
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;">
<!--[if (gte mso 9)|(IE)]>
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
Let me know if this method works for you.
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}
I have this "infobox" being sent in an email that is rendering well across most clients except for Outlook 2013. The text in the bottom row of the table is shifted when received by Outlook 2013?
Any ideas?
Here's my code:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style='padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;' class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</tr>
</table>
</td>
<td style='padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->
It looks like the issue was a validation error. You had the closing TR for "Live chat" below the closing TR for "Tweet us". Once moved to correct position works fine.
The other possibility is if you are talking about Outlook 2013 when viewed on a larger DPI screen (https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013) then Outlook 'conveniently' increases the size of your text and images, but does so without truly scaling the whole email to the higher setting, which can royally screw up an email.
If the DPI scaling is your issue, I would use the above article and this recent SO question to hopefully solve your issue: Prevent Images in HTML Email Scaling Up With DPI Scaling, Outlook 2013
Below is info pulled from SO answer above:
Use inline styles and px units on tables.
You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.
<table>
<tr>
<td height="500" style="width: 500px;height: 500px;">
</td>
</tr>
</table>
Add this to your code to make VML scale.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
Use MSO Magic for cellspacing and cellpadding.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>
Below is the code with the validation error fixed:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style="padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;" class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
</tr>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</table>
</td>
<td style="padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->