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.
Related
With the following code I styled my email signature and it looks good in different browsers. But in MS Outlook there is something wrong with the size and the line height.
<table aria-hidden="true" cellspacing="0" cellpadding="0" width="652" style="margin: 0; max-width: 100%;">
<tr>
<td style="font-family:'Calibri', sans-serif;font-size:10pt;overflow:hidden;padding-left:2px;word-break:normal;text-align:left;vertical-align:top" colspan="7">
Some text<br>
</td>
</tr>
<tr>
<td rowspan="3">
<img src="https://via.placeholder.com/133x105.png?text=Image" width="133" alt="" style="display: block; margin: 0; padding-top:2px;max-width: 100%;" />
</td>
<td width="111" valign="top" style="padding-left:15px;">
<p style="font-family:'Calibri', sans-serif;font-size:10pt; margin: 0;">
<strong>John Doe</strong><br />Text
</p>
</td>
<td valign="top">
<img src="https://via.placeholder.com/251x63.png?text=Image" width="251" alt="" style="display: block; margin: 0; max-width: 100%;" />
</td>
<td valign="top" colspan="4">
<img src="https://via.placeholder.com/142x63.png?text=Image" width="142" alt="" style="display: block; margin: 0; max-width: 100%;" />
</td>
</tr>
<tr>
<td valign="top" style="padding-left:15px;" colspan="2">
<p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:12pt;">
1234 5698 56
</p>
</td>
<td valign="top" colspan="4">
</td>
</tr>
<tr>
<td valign="top" style="padding-left:15px;" colspan="2">
<p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:10pt;">
j.doe#domain.de<br>Comapny Name | Street | ZIP City
</p>
</td>
<td valign="bottom">
<img src="https://via.placeholder.com/55x29.png?text=Image" width="55" alt="youtube" style="display: block; margin: 0; max-width: 100%;" />
</td>
<td valign="bottom">
<img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Marbo Mediengruppe" style="display: block; margin: 0; max-width: 100%;" />
</td>
<td valign="bottom">
<img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Instagram" style="display: block; margin: 0; max-width: 100%;" />
</td>
<td valign="bottom">
<img src="https://via.placeholder.com/27x29.png?text=Image" width="27" alt="facebook" style="display: block; margin: 0; max-width: 100%;" />
</td>
</tr>
</table>
In browser it looks like as it should.
And in outlook it looks like
I tried to set up the line height without any results.
Outlook uses Word for rendering message bodies. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
I am trying to create a HTML Template which I will use to send emails.
In template, I have a single row table which I want to make it either completely horizontal or completely vertical like below depending on screen width.
in laptop or desktop it should look like this
and in mobile devices it should look like this
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
</style>
<table>
<tr>
<td class="innerpadding borderbottom">
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Have you tried using bootstrap? It would make your life very easier. And would involve less code.
sample :
table { width: 90%; }
td { height: 40px; padding: 0px 20px 20px 0px; border: 1px solid #333; }
#media screen and (max-width: 640px) {
td { display: block; width: 90%; }
}
<html>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
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>
I'm doing up a newsletter for my non-profit organization and I'm trying to code a new banner in place. I can't use an image map because that won't render properly in many email clients, so I've had to chop up the image and hyperlink the various sections. I also don't believe I can use CSS since this is being distributed as an email (though I'm open to using inline style if it will work with email clients).
The problem I'm encountering is that many email clients seem to place a gap of several pixels between the top image and the 8 chopped up images on the next row when they should be rendering flush, with a 0 pixel gap. Is there any way I can group these images together so that they always render together as one image?
Here is my code:
<!-- END MessageViewer link --><!-- BEGIN banner and buttons -->
<tr>
<td style="border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; border-right: #ffffff 1px solid;" valign="top">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" />
<br />
<a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a>
</td>
</tr>
<!-- END banner and buttons --><!-- BEGIN main content area -->
Try making the new row a new row by replacing <br> with </td></tr><tr><td>. And set cellpadding="0" and cellspacing="0" inside the <table>. Besides that, you may want to use an email code validator like Mally or emailonacid (look for email optimizer).
From my experience, image maps seem to work fine. Note: See comments below regarding image maps.
If you want to break the images up though, here is the way. Note each image is in it's own table cell and has some inline css, most importantly display:block;.
<!-- END MessageViewer link -->
<!-- BEGIN banner and buttons -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" style="margin: 0; border: 0; padding: 0; display: block;" />
</td>
</tr>
<tr>
<td width="77">
<a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="43">
<a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="99">
<a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="144">
<a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="143">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" style="margin: 0; border: 0; padding: 0; display: block;" />
</td>
<td width="30">
<a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="29">
<a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="35">
<a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
</tr>
</table>
<!-- END banner and buttons -->
<!-- BEGIN main content area -->
Also, put this in your email head:
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
table td {border-collapse: collapse;}
</style>
Just note that with the 'many images' technique, when someone forwards your email out of Outlook, there is an unavoidable gap created between the rows. It is better to avoid horizontally splitted images because of this.
The <br> is probably creating the gap.
Set the width of the TD to match the width of the banner image, and remove the <br>. This will force the next line to wrap automatically.
You can use CSS, but it needs to be inline.
For more complete info, see Campaign Manager CSS Guide.
Here is the solution: http://jsfiddle.net/TgTJ6/
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="8"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" /></td>
</tr>
<tr>
<td><a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a></td>
<td><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a></td>
<td><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a></td>
<td><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a></td>
<td><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /></td>
<td><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a></td>
<td><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a></td>
<td><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a></td>
</tr>
I just made some <tr> and <td>'s, a colspan="8" and display:block on all of the images. This is the way to do it. Dont use <br> between images, some email clients just removes them, when theres no text nearby
I have a pre-designed HTML email that i have sliced and coded using Komodo edit. All content is within a table where display: block and border-collapse: collapse; have been added to the tables inline-CSS and also line-height: 0px; to the cells inline-CSS. I have been using EmailonAcid to test my HTML email and what seems to be happening is everything looks fine on every email program except for Outlook. Outlook is addining extra white space to the sliced images causing the surrounding content/images to become out of line.
<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
<p> ALL MY TEXT GOES HERE</p>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
<td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
Text here
<br/>
<span style="font-weight: bold;">£#XX.XX#</span>
</td>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
<td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">
text here
</td>
<td colspan="3">
<img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
<td style="width:" 90px; height: 21px; font-size: 12px;">
<span style="font-weight: bold;">
£#XX.XX#</span> </td>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
<td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
text here
<br/>
<span style="font-weight: bold; ">£#XX.XX#</span>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
#dealername#
<br/>
#contact_number#</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>
Is there anyway of getting rid of the extra spaces?
Try style="line-height: 0px;" on table cells.
Also look carefully if widths and heights on table cells and images are correct and set properly.
The problem is that slicing full layout sometimes creates unnecessary white space for images, as that full layout slicing does not properly justify the trs and tds for the layout. I suggest you need to create a table in dreamweaver and slice only the images that you require and put them manually. This will solve your issue. I have done it practically and it works for me.