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.
Related
I'm a really really new beginner. I have been tasked with making an email signature by my boss and I cannot figure out how to produce it. I'm using dreamweaver and have written really basic HTML emails that sent successfully, so my code isn't the absolute worst.
I'm trying to recreate this (made in word):
I want the four lines to the right of the logo to be left-aligned, and the bottom two lines to be centered. I don't have any alignment defined in table {} or tbody tr td {}.
Here is how it looks in the chrome preview:
I will comment to show you how it looks in dreamweaver
in style:
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody tr td {
font-family: sans-serif;
font-style: bold;
color: black;
font-size: 13px;
}
.B {font-size: 14px;
text-align: left !important;
}
.smallcaps {
font-variant: small-caps;
font-size: 14px;
text-align: left !important;
}
.bcorp {
font-variant: small-caps;
font-size: 14px;
text-align: center;
}
.pad {
padding-left: 12px;
padding-right: 12px;
vertical-align: bottom;
text-align: center;
}
a {
text-decoration: none;
text-align: center;
}
And in table>tbody:
<tr>
<td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg" alt="Logo" width="96" height="90"/></a></td>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
</tr>
<tr>
<td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
</tr>
<tr>
<td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
</tr>
<tr>
<td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
</tr>
<tr>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpadding="5">
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
</td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
<td width="101"> </td>
</tr>
Edited: added code - hope it's clear enough to help
Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td> Icon1 </td>
<td> Icon2 </td>
<td> Icon3 </td>
<td> Icon4 </td>
<td> Icon5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
You can achieve the required alignment in the cells using CSS properties: text-align:center and text-align:left. By the way, a row defaults to text-align:left so if you don't put the alignment then it by default goes to left alignment.
And for merging the cells, you can use rowspan and colspan attribute in the tag inside HTML.
I am posting a working example with complete CSS and HTML code for your consideration here: https://jsfiddle.net/rahuldhangar/0s5usofv/
HTML code:
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<ul style="list-style:none;margin:0;padding:0;">
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
</ul>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
I'm building a responsive newsletter which display correctly in every browsers and email clients except Outlook 2007 & 2010 (though it's ok on Outlook 2003 and previous, and on 2013 and upper versions).
There is an extra 18px space added inside one of the table cells of this header:
With some explanations:
1 is a a table inside my first cell, which seems to have the valid height (186px). 2 and 3 pictures are 186px height, but their cells are bigger.
Here is the header html:
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff">
<tr>
<td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9">
<table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
<tr>
<td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell">
<img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" />
</td>
</tr>
<tr>
<td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;">
N°1 | Octobre 2015
</td>
</tr>
<tr>
<td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;">
<img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" />
</td>
</tr>
</table>
</td>
<td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2">
<img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
<td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3">
<img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
</tr>
</table>
</td>
</tr>
I tried many fix, none worked: adding line-height to the cells that contains image with mso-line-height-rule: exactly before, collapsing HTML to remove any space, changing doctype... I'm a little out of ideas here, anyone have any clue of what is happenning here?
it's because you have a cell (line 7) that is < 15px tall. Outlook 2007 and 13 will expand whatever cell you have that's under to 15.
a workaround:
<tr valign="bottom">
<td height="9" style="font-size:9px; line-height:9px;">
</td>
</tr>
i usually get around doing that by using padding-top and bottom on tds (nesting tables where needed)
I found out what was wrong, and it was pretty trivial. The first row of my table (the one with rowspan) was missing a second cell - so the table layout was wrong.
Just by changing :
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
To :
<tr>
<td width="20" rowspan="4" class="head-left-margin"> </td>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
Fixed the issue. After that I still had one pixel vertical spacing after my images that are in cells with height < 15px. Thanks to zazzyzeph answer, I fixed it by changing the line-height and font-size to 0px (setting the height of the image didn't worked for me) with mso-line-height-rule, adding margin: 0 on the image and by collapsing the code to leave no space before/after the picture.
For example:
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>
With all those fix my header now show perfectly on all email clients.
In order to learn more about HTML, I am designing an HTML newsletter template from scratch. I got everything working properly. However , I have a section where I want to add 4 social media icons, distributed evenly across the table row.
I am trying to do this mostly with HTML and inline css due to the requirements of the various email software but I cant seem to get it to work. I've attached you can see what I mean (I'm building this on a local machine so no real images there). I just need the 4 images spread evenly across the row.
Thanks a lot in advance
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</td>
You need colspan="4" on the "Connect with us" table cell, so that it spans the four columns of the row below.
You are just missing the colspan on the first tr td. Add this and it should work.
You also seem to have some table padding which is causing an offset from the left. I would recommend adding it to the right as well as this will make everything seem off centre.
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff" colspan="4"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<a href="https://www.facebook.com/" target="blank">
<img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.twitter.com/" target="blank">
<img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.youtube.com/" target="blank">
<img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="#" target="blank">
<img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</a>
</td>
</tr>
</table>
Alternative's can be done in CSS and i would highly recommend learning CSS next on your journey into HTML and web development as CSS will be much more helpful and usable in future work.
You can use attribute valign for td.
<table>
<tr>
<td valign="middle">
<img src="http://logonoid.com/images/stack-overflow-logo.png" height="30px">
</td>
</tr>
</table>
http://codepen.io/anon/pen/azvEPW
If you are talking about centering the image in the table cell,
<td align="center">
or
<td style="text-align: center;">
So basically you add text-align: center; to your style
try this
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block; margin:auto;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;margin:auto;">
</td>
You can set static size.
100 / 4 = 25
<td align="center" valign="middle" width="25%">
And that's better to change "padding: 25px 0px 0px 15px" to "padding: 25px 0px 0px 0px" because 15 set on the left of the table and shift all images to right.
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 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.