September 13, 2013

HTML Email Rendering Issue with Outlook 2013

Post by: Melanie Lenaghan

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. Until then, I continue to build my library of helpful hints as new versions of both email clients and ISPs continue to be released.

Relevant Insights

New Site Showcases Our Growth Into a Full-Service IT Consultancy

Over the past year, Core BTS has evolved. Simply put, we’ve amassed greater scale and expertise that, in combination with...

5 Steps to Reduce Your Ransomware Risk

As the recent ransomware attack on the U.S.’s second-largest meat producer, JBS, made clear, cyberattacks on critical infrastructure can cause...

How to Unlock the Organizational Value of Digital Transformation

As organizations look to stay competitive in today's dynamic and unpredictable marketplace, a trend has re-emerged that is ushering us...
X