HTML email - gaps between images in Outlook 2013 - html

I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this -
My code is available here - HTML version.
I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?
Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.

Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So
<td width="150" style="line-height: 83px;">
<img src="" height="83px">
</td>

You are running into issues because you are going about the whole layout wrong. You shouldn't need to break your watch image up into multiple pieces, and definitely shouldn't have an image containing the letters 'DS' from the title in the center.
Because you have a complex layout, it is better to use colspans and nested tables - it is a cleaner technique than cutting images into little pieces. Images that are cut horizontally will always cause issues - if not in the initial send, Outlook will force gaps in there if it was forwarded anyway. If you must cut an image, try to do it vertically as it will remain perfectly intact in all clients.
It is also good practice to have all CTA's (calls to action) and important copy/text in html, not images, as most clients block images by default. It is also considered spammy to have an email that has a bad ratio of images to text.
Give this a try:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="400" style="padding:30px;">
Fall in love with...
</td>
<td valign="top" width="50"> <!-- It is easier to split an image vertically -->
<img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
Luxury Watch Brands <!-- Titles like this should always be in text not images -->
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" colspan="3" width="250">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
<img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
Shop Luxury Watches > <!-- Call to actions are better in text not images -->
</td>
</tr>
</table>
</td>
</tr>
</table>

the best output for an emailer can be done by slicing image vertically,(not horizontally) and arrange it in multiple nested in single row . It will work flawlessly in all clients

Related

HTML Email : Images go beyond table width

I am making HTML Emailer.
The issue that I am facing is, when I put 5th images in a single row then it expands table width, rather than going down in the center of new line.
<table cellspacing="8" style="margin: 0 auto; text-align: center; max-width: 500px !important; " width="500">
<tr>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
</tr>
</table>
What I want is , when i put 5th image then it should be down to the center of the new line. also it would be great , that the same output can be displayed in Outlook
Any help would be grateful.
Thank You.
Try using display:inline-block in your td.

Placing Anchored Images on top of table background for email template

I have the following code for a background Image on a table, which has some image links on top of it as well as a logo. I am using a mailchimp account and I would like to make the background editable. it is not possible to make background images editable.
So I am wondering about alternative solutions to have the social links and logo on top of a image while still allowing a image underneath to be editable, so background image without a background property in a table, that is compatible in most email clients, that allows for editing in Mailchimp.
<table mc:edit="backgroundImage" class="backgroundHeader" background="http://104.131.7.150/public/vancouverSunrise.jpg" border="0" cellpadding="0" height="400" cellspacing="0" width="100%">
<tr valign="top">
<td>
<div align="right" style="padding: 40px 15px 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0" width="30">
<!-- LOGO/PREHEADER TEXT -->
<tr align="right">
<td><a mc:edit="linkedin" href="*|CUSTOM_URL|*"><img src="linkedin.png" width="46.6" height="44" /></a></td>
<td><a mc:edit="facebook" href="*|CUSTOM_URL|*"><img src="facebook.png" width="46.6" height="44" /></a></td>
<td><a mc:edit="twitter" href="*|CUSTOM_URL|*"><img src="twitter.png" width="46.6" height="44" /></a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr valign="top">
<td>
<div align="center" style="padding: 10px 15px 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0" width="30" class="wrapper">
<!-- LOGO/PREHEADER TEXT -->
<tr align="center">
<td><img src="image.png" width="244" height="126.6" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
You can't use z-index either so hacking an img on top of another is impossible.
You need to have a set up based around the code from http://backgrounds.cm/ and have your mc:edit attributes get to the filename in both the background attribute of the TD (not the table, table backgrounds don't work in most clients) and the VML script from the generated code. You also need to update the height and width attributes on the TD and VML.

Issue in creating email teamplate

I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>

html email issues with layout

I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.
I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.
My html. I think you'll agree it couldn't be more simplified!
<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
<tr>
<td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
</tr><tr>
<td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
<td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
</tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<img src="images/OC_04.gif" alt="" width="550" height="105"></td>
</tr>
</table>
Is there anyone here today that has enough email html experience to point me in the right direction?
Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.
You must include style="display:block" with all images to prevent the gap issue in various email clients.
Example:
<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty"
width="1000" height="1000"
style="border:none; margin:0px; padding:0px; **display:block;**"/>
Add following attribute to the IMG element:
style="display: block;"
I've added it for you http://jsfiddle.net/xE9Qr/
Default IMG display is inline-block which produces unwanted space after.
I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.
Adding align="top" to images seems to be a potential fix:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
<img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
<img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
<img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
<img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></td>
</tr>
</table>

html email outlook 2003 issue

I have an html email set up as
<td valign="top"><table width="650" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr>
<td width="25" valign="top">
<img src="/images/left_border.jpg" border="0" align="right" style="padding:0; display: block;">
</td>
<td width="600" valign="top" style="padding: 0px;">
<img src="/images/banner.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
<td width="25" align="left">
<img src="/images/right_border.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
</tr>
</table>
</td>
However in outlook 2003 and entourage email clients, it appears as an additional border on left and right sides.
How can it be resolved?
It's not going to work well in Outlook 2007+ either because you're using non-compatible tags including padding: and display:. So, back to the drawing board all around. Here's a refresher on what the various browsers support: http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_27_Aug_2009.pdf
Technically, the code you posted is invalid because it starts with a <td> which has to be inside a <table> and <tr> to be valid. I'm suspecting you posted just a snippet, so perhaps providing the entire context would be best.