Gaps between images in Outlook 2013, fix causes issues in other places

Hello everyone,

We recently ran into trouble where we had a table full of images that were sliced separately for alt-rendering reasons, yet need to appear as one continuous image. We had already implemented the usual fixes ie. display:block; etc. But gaps started appearing horizontally between stacked images in Outlook 2013.

After some Googling it appeared that we had found a solution at Email on Acid: … tlook_2013

Long story short, the fix is to add "style="line-height:**height of image**" as an embedded style in the image's containing TD cell, for example:

<td style="line-height:30px;"><img src="..." height="30" /></td>

This seemed to fix the issue, or so we thought.

After implementing the fix we started receiving feedback that certain users (not everyone) using Outlook 2010 who had no issues with our emails before were starting to see massive gaps between their images. The problem was tracked down to be a setting in Windows that helps those with poor eyesight.  You see these users had gone to Control Panel > Display, and changed the display size from the default "Smaller" to "Medium - 125%" or "Larger - 150".  I suspect this caused Outlook to not only scale the font-size in our emails, but also scaled the "line-height" in our tds causing the cells to extend past the height of the images.

We reverted the change to test by deleting the "style="line-height:**height of image**" and this caused our emails to display perfectly in Outlook 2010, even with the display settings zoomed in. BUT that leads us back to square one with gaps appearing in Outlook 2013.

Is there any way we can have our cake and eat it too? Is there a solution that satisfies both users of Outlook 2013 and those who run Outlook with their Windows Display settings zoomed in? (We'd guess many of our prospects do this as we tend to send to older demographics).

We're thoroughly stumped and any help would be greatly appreciated!

roshodgekiss roshodgekiss, 2 years ago

Oh goodness kydeck - this is a tricky one. We've had multiple threads on this forum in regards to issues that zoom introduces, including:

So far, there's been one suggestion that may or may not work - the use of conditional comments. You can try adding the following style to <head>:

<!--[if gte mso 9]><xml>

There's also these instructions for resetting the zoom level.

Thanks, kydeck and sorry we don't have a silver bullet here. These spacing/zoom issues are very tricky and we'll certainly continue looking for a fix on our end.

Get in touch with us on Twitter:
We're also on Facebook:
JohnP JohnP, 2 years ago

I've never had issues with Outlook 2013 separating vertically stacked images. Just keep the images/cells above 19px in height and you can avoid all the line-height hacks.

Not sure how you are doing it, but this basic example works fine in Litmus:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    table td {border-collapse: collapse;}
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="600" border="0" cellpadding="0" cellspacing="0">
    <td height="200">
      <img alt="" src="" width="600" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
    <td height="20">
      <img alt="" src="" width="600" height="20" style="margin: 0; border: 0; padding: 0; display: block;">
    <td height="40">
      <img alt="" src="" width="600" height="40" style="margin: 0; border: 0; padding: 0; display: block;">
    <td height="100">
      <img alt="" src="" width="600" height="100" style="margin: 0; border: 0; padding: 0; display: block;">

kydeck, 2 years ago

Thank you for the input everyone.

We tested your fix roshodgekiss and that didn't show any results :(

JohnP, we tested your theory and yes we can confirm that images over 19px won't behave this way. We discovered that setting very small line-heights (0-5px) for shorter images, will allow them not to gap in either situation in Outlook (though not sure what would happen if those images contain alt-text. This line-height hack does not appear to work on images that are smaller than 10px tall.

At least now we seem to have a decent grasp on these issues, Outlook just always making things interesting.

JohnP JohnP, 2 years ago

I'd be surprised if you couldn't find a workaround to creating an image shorter than 20px.

If you are after a horizontal line or border, just put it in a png with the rest of the pixels transparent. You are probably padding your text below it anyway, so just steal some of that padding space for your image.

If that is not the case, your <20px image is probably touching another image. In that case, just include it as part of that image.

With a little planning, you can avoid ever having to deal with this issue. I've created hundreds of emails and never had to line-height it - I just design around it.

I've found line-height to be inconsistent across clients generally and never use it. I'm not saying that this line-height method doesn't work (I've never tested it in this scenario), just that it is not needed.

Semi-related: There is also Outlook's separation on forwarding issue to consider. Creating an additional row, just adds more unwanted vertical spacing when Outlook does its thing. As this separation is unavoidable, we should be mindful of limiting this. Only way to do that is with one less table row. This is why it is better to combine your images whenever possible, and/or keep your unwanted gaps appearing in a nice padded area where it is unnoticeable.

Jonathan Hodak Jonathan Hodak, 2 years ago


Unfortunately to fix this you will have other problems.  However, you can always use the css - mso-line-height-rule:exactly; and use it as a conditional statement for only outlook 2013. 

The problem is you will need to set your line height to the exact size of your image.  Alt text will be a problem if your alt-text goes over one line.  But this is one of the more bulletproof methods I have found to absolutely force the office clients to not obey the height you want for images, along with display:block; it works pretty nicely, if you are ok with the side effects of not using a lot of alt-text.  Otherwise look closely at your email and follow JohnP's advice.  I have had a lot of e-mails that seemed impossible, but just needed some creativity to make them work across all browsers and sometimes less is more.  Happy Coding!

Best of luck,

- Jon

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free