Outlook 2013 Cell Height Bug :: Solution

With some time available and a fresh Virtual PC / Outlook 2013 install, I believe I’ve finally sorted out the differences in display for Outlook 2013’s height bug in terms of using images, when not using images, when using multiple cells, when using different heights, etc.

Expanding on this post, I've found "font-size:1px; line-height:1px" does not work in some arrangements, and neither does "font-size:1px; line-height:0".  There are also issues where some of the combinations from the original fix cause other email clients to display incorrectly.

*** EDIT ***
GO TO PAGE 2 FOR THE EASY FIX

Redferret, 1 year ago

have you tried using mso-line-height-rule:exactly; ?

BThies BThies, 1 year ago

Hi Redferret,

Yes, but that will cause images to display incorrectly when used with the fix.  If you have a 5px height image, you'd need to change the line-height to 5px as well on that cell - otherwise the image would display at 1px height.

For this I was looking for an overall solution that involves a universal style guideline that doesn't need to be adjusted for each layout.

Also, I only use mso-line-height-rule:exactly on <div>, <li> and <p> tags to prevent complications in spacing.

- Brian


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
Redferret, 1 year ago

ah, I see your point, good fix!

BThies BThies, 1 year ago

Stand-by - I may have found an even easier fix.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 1 year ago

Hi Brian, one of our customers suggested the following code over the weekend:

<td height="1" bgcolor="#cccccc" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;</td>

The principal difference is the use of line-height: 1%; mso-line-height-rule: exactly;. We haven't had a chance to test this yet, but if you do have better luck with this approach before we give it a go, please let us know :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 1 year ago

Hi Ros,

There are gaps under images when using that.

This is really the key:

tr { font-size:0; mso-line-height-alt:0; mso-margin-top-alt:1px; }

as it removes the need for non-breaking spaces.  Unfortunately it causes issues with nested tables.  If we could work out the bugs on that, it'd be an all around easy fix.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 1 year ago

Give this a try.  It targets just Outlook 2013, and appears to work without any need for special characters or other code adjustments:

<!--[if gte mso 15]>
    <style type="text/css" media="all">
    tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
    </style>
<![endif]-->

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
wilbertheinen wilbertheinen, 1 year ago

I'll give it a try today! Thanks for sharing!


Create a Clang!
wilbertheinen wilbertheinen, 1 year ago

I had problems with table cells containing text. They almost dissapeared. I added a line-height to the table cells containing text and the problem was solved.


Create a Clang!
wilbertheinen wilbertheinen, 1 year ago

I tried something else. I added font-size: 0 and line-height: 0 to the body in the head css. I didn't encounter any problems using this. Could you give this a try?

body {
    width: 100% !important;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background-color:#ffffff;
}

Create a Clang!
BThies BThies, 1 year ago
wilbertheinen wrote:

I had problems with table cells containing text. They almost dissapeared. I added a line-height to the table cells containing text and the problem was solved.

You'll need to put text within a <div>, <p>, or <li> using a specific font-size and line-height.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 1 year ago
wilbertheinen wrote:

I tried something else. I added font-size: 0 and line-height: 0 to the body in the head css. I didn't encounter any problems using this. Could you give this a try?

body {
    width: 100% !important;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background-color:#ffffff;
}

Caused 1px gaps at the bottom of smaller images and most table cells.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
wilbertheinen wilbertheinen, 1 year ago

It should be indeed, but i'm not used to work with those elements in email html. I always use table cells. What are the advantages of using <div>, <p>, or <li> besides using less and neater code?


Create a Clang!
wilbertheinen wilbertheinen, 1 year ago
BThies wrote:
wilbertheinen wrote:

I tried something else. I added font-size: 0 and line-height: 0 to the body in the head css. I didn't encounter any problems using this. Could you give this a try?

body {
    width: 100% !important;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background-color:#ffffff;
}

Caused 1px gaps at the bottom of smaller images and most table cells.

I've tested with a different backgroundcolor and didn't see any gaps.


Create a Clang!
BThies BThies, 1 year ago
wilbertheinen wrote:

I tried something else. I added font-size: 0 and line-height: 0 to the body in the head css. I didn't encounter any problems using this. Could you give this a try?

body {
    width: 100% !important;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background-color:#ffffff;
}
BThies wrote:

Caused 1px gaps at the bottom of smaller images and most table cells.

wilbertheinen wrote:

I've tested with a different backgroundcolor and didn't see any gaps.

I ran that code on two different full layouts, and it caused 1px gaps in Outlook 2007/2010/2013.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
wilbertheinen wilbertheinen, 1 year ago

Interesting...


Create a Clang!
BThies BThies, 1 year ago

@wilbertheinen

Using your code with an adjustment, these would be the two solutions so far using conditional coding that have worked (so far) without flaws:

<!--[if gte mso 15]>
    <style type="text/css" media="all">
         tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
    </style>
<![endif]-->

and

<!--[if gte mso 15]>
    <style type="text/css" media="all">
         body { font-size: 0; line-height: 0; }
         tr { mso-margin-top-alt:1px; }
    </style>
<![endif]-->

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
wilbertheinen wilbertheinen, 1 year ago

I like the conditional coding idea, because it only affects Outlook 2013. Nice work!


Create a Clang!
BThies BThies, 1 year ago
wilbertheinen wrote:

It should be indeed, but i'm not used to work with those elements in email html. I always use table cells. What are the advantages of using <div>, <p>, or <li> besides using less and neater code?

<div> tags are nice because they provide the ability to create better specific spacing than <br /> tags can provide.  For instance:

<div align="left" style="font-family:Arial; font-size:14px; line-height:18px; color:#000001;">Headline</div>
<div style="font-size:16px; line-height:20px;">&nbsp;</div>
<div align="left" style="font-family:Arial; font-size:12px; line-height:15px; color:#000001;">Content</div>

This provides a roughly 20px space between the headline and the content without using additional table cells, <p> tags (in which Outlook.com won't respect margins), or <br /> tags (which can be flakey in spacing when using two in a row).

They also work great for styling CM tags:

<style>
.headline p { font-family:Arial, font-size:14px; line-height:18px; color:#000001; margin-top:0px; margin-bottom:15px; }
</style>

<div align="left" class="headline"><multiline label="Headline"><p>Headline Content</p></multiline></div>

Overall it prevents having to create additional rows (or use spans) when using different fonts/colors/sizes in a single cell.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 1 year ago

For those following this thread, here's the code to use for testing:

<!--[if gte mso 15]>
    <style type="text/css" media="all">
         /* Outlook 2013 Height Fix */
         body { font-size: 0; line-height: 0; }
         tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
    </style>
<![endif]-->

Note:
- Place this immediately above the </head> tag (below any other style section)
- When images are disabled, a table cell somewhere within the layout MIGHT display at 15px height (even if the height is 1 or 2px).  As soon as images are enabled, the cell reverts to its original intended height.  Not a major issue, but be aware if it occurs.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 1 year ago

Hey there Brian, I gave this a go and it applies font-size: 0; to all surrounding text, causing it to disappear, sadly. I'm still testing away, but if you have any insights in the interim as to how we can fix this, you'd be the man of the moment :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 1 year ago

Alternative that shouldn't mess with td, div, p or li based styling:

<!--[if gte mso 15]>
    <style type="text/css">
            table { font-size:1px; line-height:0; mso-margin-top-alt:1px; }
    </style>
<![endif]-->

Breaking it down:

line-height:0 OR mso-line-height-alt:0
Required to keep the cells from defaulting to 15px height

font-size:1px
Required to prevent smaller height images from only rendering at 1px height when using a line-height of 0

mso-margin-top-alt:1px
Required to prevent smaller height images from shifting up 1px (they actually disappear by 1px off the top).  This sets them back in the correct position.

The only issue I've found so far is that Outlook 2013 will render the very first cell of a nested table group as 15px height regardless of any setting.  Typically I have a row that's used to push content off the very top anyway, so usually that 15px is applied to that row (which isn't a big deal).  However, in some layouts it may cause random cells to pop up at 15px depending on how it's coded.  With the variations that different people use in either stacking tables or nesting tables, it's just a matter of finding which works best with this solution.

In looking at that first cell in edit mode, I can see that the font-size, font-family, etc. are being completely ignored, and are reverting to the initial Times New Roman setting with a 10pt font-size.  This requirement is the initial cause of the bug in all cells, and why setting the font-size/line-height so low is the solution.  However, why it's choosing to ignore it on the very first cell is beyond me.

In any case, if you find a cell like the first one that absolutely refuses to set itself at the correct height, apply the old technique of: <td style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&nbsp;</div></td>.  If the cell is very narrow (1px or 2px wide), you can also use &#8203; which is a non-width space.

------------------------------------

On a different note: I've found several instances of Outlook 2013 being very buggy.  Whether it's within their menus, or rendering text and line heights within the email body, I've seen content change from one moment to the next.  I've opened the same email 5 or 6 times, only to see random places where the content rendered funny.  I've opened menus off the ribbon that had copy cut off.

It's obvious this software wasn't fully tested, and the changes they made to make it more "Windows 8 friendly" are showing lots of issues.  I would start a thread on Microsoft's support site, but as I'm finding out with the Outlook.com margin bug, they truly don't care about quality.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
jeremyivy, 1 year ago

I'm still wrestling with this bug!

I have tried the fixes here and none of them are working out for me in Outlook 2013

Test code below...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fashion &amp; friends for everyone!</title>
</head>
<body style="background-color:#ffffff; margin:0;">
<style type="text/css">
html { -webkit-text-size-adjust:none; }
table{
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border: none;
}
img {display:block; border: none;}
/* addresses Hotmail emoji bug */
.ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important; }
</style>
<!--[if gte mso 15]>
    <style type="text/css">
            table { font-size:1px; line-height:0; mso-margin-top-alt:1px; }
    </style>
<![endif]-->
<table width="305" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tr>
    <td width="75" height="32" align="left" valign="top"><a href="http://www.buildabear.co.uk/shop/browsecategory.aspx?CallingPage=BrowseCategory&Category=Gifts+To+Go&01&sc_cid=em:rs:$campaignname$:pawsonalisedgiftssn" rilt="pawsonalisedgiftssn"><img src="http://netstore.buildabear.com/email/2013/images/041613_UK_SpringGifting_AutismBear_08.jpg" alt=" " width="75" height="32" border="0" style="border:0; display: block;"></a></td>
    <td width="90" height="32" align="center" valign="middle" bgcolor="#EB008D"><div style="font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height: 14px; font-weight: bold; color:#ffffff;"><a href="http://www.buildabear.co.uk/shop/browsecategory.aspx?CallingPage=BrowseCategory&Category=Gifts+To+Go&01&sc_cid=em:rs:$campaignname$:pawsonalisedgiftssn" rilt="pawsonalisedgiftssn" style="color:#ffffff; text-decoration: none;  font-size: 14px; line-height: 14px;">SHOP</a></div></td>
    <td width="140" height="32" align="left" valign="top"><a href="http://www.buildabear.co.uk/shop/browsecategory.aspx?CallingPage=BrowseCategory&Category=Gifts+To+Go&01&sc_cid=em:rs:$campaignname$:pawsonalisedgiftssn" rilt="pawsonalisedgiftssn"><img src="http://netstore.buildabear.com/email/2013/images/041613_UK_SpringGifting_AutismBear_10.jpg" alt=" " width="140" height="32" border="0" style="border:0; display: block;"></a></td>
  </tr>
</table>
</body>
</html>

BThies BThies, 1 year ago

Hi Jeremy,

What issue are you seeing with your code?  I tested your code and I'm not seeing any problems.

Brian


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
  1. 1
  2. 2

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account