Back to List

HTML Email Rendering Issue with Outlook 2013

Melanie Lenaghan Melanie Lenaghan  |  
Sep 13, 2013
 

Designing HTML emails for Outlook has always been a challenge given that Outlook uses the Microsoft Word rendering engine to display its emails.  I always knew to follow the basics, such as avoid background images and CSS positioning such as float, margin and padding.  As cluttered as the code looked, nested tables became my friend.  This doesn’t seem so bad, right?  These simple tips kept my emails rendering properly throughout the Outlook 2007 and 2010 updates.

Unfortunately the release of 2013 was not as kind.  Although the rendering is very similar to past updates, I was faced with an unexpected and unpleasant spacing issue between images that my usual “display: block” was not going to fix.

Every table cell previewed in Outlook 2013 contains a line height defined by Outlook.  Therefore empty table cells and cells containing images smaller than roughly 15 pixels display a minimum height of 15 pixels regardless of what the cell’s height attribute is set to.  This can cause white gaps between images in your email.



Luckily there is a fix.  The issue can be solved by declaring a height and line-height to the table cell where that height equals the image height contained within that cell.  The new code would look something like this:

<td style="height: 12px; line-height: 12px;"><img src="../image.jpg" style="display: block;" width="600" height="12" /></td>

Although I am grateful to have found a fix for this particular issue I have to admit I dream of the day where all HTML emails render the same no matter which email client or ISP.  Something tells me that probably will not be anytime soon so until then, I continue to build my library of helpful hints as new versions of both email clients and ISPs continue to be released.

Email MarketingSalesforce Marketing Cloud

 

Love our Blogs?

Sign up to get notified of new Skyline posts.

 

Comments
Yannick
When we faced this Outlook 2013 problem in Instacut , we have solved it also by setting the line-height of the parent td equal to the image height of the contained img when it is smaller than 20px. Apparently it could have been 15px, but at least the 20px setting seemed to have passed our own tests.
1/27/2015 4:13:44 PM

Steven
Thanks Mel! This helped alot. Cheers!
11/5/2014 1:41:06 AM

Dave R
Very useful tip thanks, this has been a tricky issue, nice to find a solution! Given that Outlook has been going backwards, rather than forwards in terms of HTML email support, I think we'll all keep dreaming of that day when email clients render our HTML emails the same!
9/30/2014 12:49:30 AM

Atellier
Thank you for the trick. But an who has a parent doesn't work with this method.
5/21/2014 5:20:47 AM

Kyle Jackson
Melanie, thank you so much for this tip! I've been racking my brain trying to figure out just what the hell was wrong with my HTML emails in Outlook 2013. This was most helpful!
4/9/2014 5:58:32 PM

 Security code

Related Content


Blog Article
Kentico Online Marketing - How to create lead scoring
Logan RomineLogan Romine  |  
Jan 13, 2017
Have you ever wondered what contacts are engaging with your website? Possibly what contacts are hot leads? Kentico EMS license allows Marketers to easily and quickly determine what contacts are potential leads, this feature is called Scoring in Kentico. This feature does require you to have a...
Blog Article
Kentico 404 Conference - Day 3
Nieko GiulianiNieko Giuliani  |  
Nov 07, 2016
The CMS Connected Show was filmed during the first track of Day 3.  The panel discussed sales and marketing, how do we get them on the same page.   Maarten van den Hooven presented on how to lose clients in 10 days, a few of the key insights are included here.  One...
Blog Article
Kentico 404 Conference - Day 2
Nieko GiulianiNieko Giuliani  |  
Nov 04, 2016
Day 2 kicked off with an opening keynote and then some amazing business track sessions all afternoon.   The opening keynote today was all about the Scotts... Presentations by Scott Stratten of UnMarketing as well as Scott Liewehr of the Digital Clarity Group, both amazing speakers.  ...
Blog Article
Kentico 404 Conference - Day 1
Nieko GiulianiNieko Giuliani  |  
Nov 03, 2016
Day 1 of the 404 Conference is all about Kentico. The morning treated us to some exciting product announcements.    Kentico Cloud is the cloud - first CMS for digital agencies and their clients.  It will include 3 product components, Kentico Draft, Kentico Deliver, and Kentico...
Blog Article
Adding a Header Action to a Custom Module in Kentico
Axel LarsenAxel Larsen  |  
Nov 01, 2016
Ever wonder how to create one of those fancy “create another” buttons that are on a number of Kentico’s out-of-the-box modules? It may not be obvious but it’s actually just a few steps thanks to the New Header Action Webpart.      1. Open the Modules...