Upgraded to Office 2013. Trying to send out a graphic email in Outlook 2013, and have run into an error of overlapping image slices. The emails appear condensed when viewing in 2013 and overlap causing images or text to be cut off.
I’ve sent tests to private Yahoo, Gmail, and Hotmail accounts and have not seen any issues, and older versions of Outlook still show the templates just fine.
Here is an external screenshot of the issue as displayed in the middle and bottom sections: http://imgur.com/jhPwwcF
This is happening with every graphic email we are trying to send. I'm hoping someone has run into this exact issue before. Here is the code i'm using for one of the templates:
<html><style>img{display:block}</style>
<head>
<title>AffHousAug2014Seminars---Final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
<table id="Table_01" width="620" height="658" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="http://taa.org/" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
<tr>
<td style="line-height: 0">
<a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
<td style="line-height: 0">
<a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
<tr>
<td colspan="2">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td style="line-height: 0">
<a href="mailto:education#taa.org" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
<td style="line-height: 0">
<a href="http://taa.org/" target="_blank">
<img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
You have a line-height applied on the td's where it is an issue. I think its to do with that. Whilst you do need to set style="line-height:0px; font-size:0px;" on the containing td to fix some issues with outlook 2013, that only applies to images that are smaller than 30px in height. In this case it is unnecessary and is causing your td to chop off your images.
I have edited your code below to make it a bit more email compliant. This should fix a few other issues that you are likely to encounter.
For one, you shouldn't use colspan/rowspan as this causes rendering issues in older browsers. You should use nested tables instead, as I have done in the code below.
Also, to over-ride browser alignment settings, its advisable to add alignment and vertical alignment to all your td's. Again, that's in the code below.
It would be better to do all this a live copy and background colours where possible, to maximize your user engagement, but that is a decision for you to make ;)
I also added some generic css fixes to your head, that should sort out a few issues with outlook online and yahoo.
Hope this is helpful.
<html>
<head>
<title>AffHousAug2014Seminars---Final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * { line-height: 110%; }
body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img{ display:block; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table id="Table_01" width="620" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table_">
<tbody>
<tr>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
<td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
There appears to be a white line above the image in Gmail app on IOS in dark mode.
I've tried many solutions regarding this but could not remove the white line/space.
img[class="visual"] {
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto;
}
<tr>
<td bgcolor="transparent" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" class="content" align="center" width="640">
<tr>
<td bgcolor="transparent" align="center" valign="top" style="width: 640px;">
<img src="https://via.placeholder.com/150.jpg" width="640" height="250" style="display: block; border: none; max-height: 250px;" border="0" alt="Banner" class="visual" />
</td>
</tr>
</table>
</td>
</tr>
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 have built an email with tables for a client, but when I test it in AOL, extra padding is added between the images. It looks like a 3px space is being added to the right of each image... Here is my code:
<table border="0" cellspacing="0" cellpadding="0" align="center" width="700" valign="top">
<tr>
<td>
<img src="images/nav-gaming.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-poker.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-restaurant.jpg" align="left" style="display:block; vertical-align:bottom" width="102" height="33" border="0" /> <img src="images/nav-tanzibar.jpg" align="left" style="display:block; vertical-align:bottom" width="92" height="33" border="0" /> <img src="images/nav-events.jpg" align="left" style="display:block; vertical-align:bottom" width="82" height="33" border="0" /> <img src="images/nav-packages.jpg" align="left" style="display:block; vertical-align:bottom" width="96" height="33" border="0" /> <img src="images/nav-rewards.jpg" align="left" style="display:block; vertical-align:bottom" width="120" height="33" border="0" />
</td>
</tr>
</table>
Have I missed anything blindingly obvious? I have tested adding each image to a new td in the table, but that results in the same issue.
It is always safer to put images into their own table cells:
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td>
<img src="images/nav-gaming.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
</td>
<td>
<img src="images/nav-poker.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
</td>
<td>
<img src="images/nav-restaurant.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="102" height="33" border="0" />
</td>
<td>
<img src="images/nav-tanzibar.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="92" height="33" border="0" />
</td>
<td>
<img src="images/nav-events.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="82" height="33" border="0" />
</td>
<td>
<img src="images/nav-packages.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="96" height="33" border="0" />
</td>
<td>
<img src="images/nav-rewards.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="120" height="33" border="0" />
</td>
</tr>
</table>
Only exception would be if you are trying to float images (to float you need to remove display:block;). Floating can sometimes be problematic unless you have plenty of spare room in your table cell.
I have been working on this html for a while trying to figure out why outlook 2010 is adding this 1px white line between images that are hyperlinked.
I am pretty sure I have tried all the tricks I have read about Html emails and outlook. Below is the code/styling I am using for just 2 tables. They have 1 single image in each. If I remove the hyperlink, there is no space in outlook 2010. If I leave the hyperlink I can't find a way to get rid of the space!
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="179" >
<img border="0" align="left" alt="Gold Rush" height="179" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" style="height: 179px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="25">
<img align="left" border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="height: 25px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
Any and all ideas are welcome please!
Just a question of order with attributes, it seems... Try like this, it's ok for me! ;)
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img style="display:block;" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" height="179" width="600" alt="Gold Rush" border="0" /></td>
</tr>
<tr>
<td><img border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="display:block;" width="600" /></td>
</tr>
</table>
try removing the width='600px' from the <td>, so that it would take the width of the img