If you're already testing your email newsletters in Outlook 2013 Preview, then you may have noticed a little more whitespace than expected.
While Outlook 2013 may have much in common with its predecessors, Outlook 2010 and 2007, the differences are starting to appear. In this case, empty table cells (or cells containing a & nbsp;) now have a minimum height of roughly 15px, regardless of what you've set a cell's height attribute to be.
This can be particularly irritating if you've used empty table cells to create margins/padding between paragraphs of text and around images (for clients that do not support these CSS properties), or when creating 'bulletproof' horizontal rules. However, there is a rather strange solution. For example, say you have an empty cell with height="1" like this:
<td height="1" bgcolor="#cccccc"></td>Unfortunately, Outlook 2013 will give this cell a height of 15px or so by default, unless you add... You guessed it, style="font-size: 1px; line-height: 1px;" (where 1px is the cell height you're after).
Yes, adding a font size to your inline CSS styles fixes this bug. Here's the updated code:
<td height="1" bgcolor="#cccccc" style="font-size: 1px; line-height: 1px;"> </td>Unfortunately, you'll need to add this inline style to all empty cells individually, as elegant CSS workarounds like td[height="1"] { font-size: 1px; line-height: 1px;} are not supported in Outlook 2013 Preview.
Another quirk we discovered during our testing is that Outlook 2013 only supports 6-character hexidecimal codes in the bgcolor="" attribute, not 3-character shorthand or rgb(). Background colors will not display if anything other than a 6-character hex code is used.
Many thanks to the lovely Wilbert Heinen for refining this fix in the forums. As Outlook 2013 catches on in the real world, we can guarantee that adding this fix to current and future email designs and templates will save you both time and effort well into the future. If you come across more quirks like this in your travels, please get in touch - we'd love to hear about them!
21st August
Should it be noted that having text that is 1px or lower a red flag for spam detectors? At least that’s what my experience has been. Throw a non-breaking space in there and you may be increasing your spam score. Though probably not by a whole lot. Just thought I’d mention it.
21st August
On the hex code issue. Does Outlook 2013 have the same problem with background-color:#000 or background:#000? Should we be using bgcolor=”” over inline css?
21st August
That’s really interesting, James - I’d love to hear more about this! Anyone have any examples or documentation, so we can look into this further?
22nd August
Hi, I think that in previous versions of Outlook the problem with the 6 character heximal codes still happened.
On the other hand, about the problem with the height of the empty table cells, I always use this solution: <td height=“15” line-height:1px”> </td>
22nd August
sorry, the code of the solution don´t appear. I add a line-height with a value of 1px (in combination with the font-size) and I use a entity “ ” inside the empty cell.
22nd August
Will you need a font-size=“1” if you just place a small dot_trans.png 1px*1px image within the cell?
28th August
Outlook 2013 gets small cell heights (or even cells with small spacer gifs) wrong.
Fix:
<td height=“1” line-height:0;”><non breaking space></td>
if during a litmus test random gaps appear around some images (Doesn’t seem to happen all the time)
<td >image.gif</td>
if this issue occurs where
<tr>
<td>image</td>
<td>image</td>
<td>image</td>
</tr>
setting line-height on the tr will also work.
28th August
okay, half my code was swallowed there.
Outlook 2013 gets small cell heights (or even cells with small spacer gifs) wrong. Fix:
td height=“1” style=“font-size:1px; line-height:0;”><non breaking space>td
if during a litmus test random gaps appear around some images (Doesn’t seem to happen all the time) Fix:
td style=“line-height:17px;”>img src=“image.gif” width=“620” height=“17” alt=”” border=“0” style=“display:block;” >td
if you have a table row of images, setting a line-height on the tr will also work.
14th September
any tricks to fix the line-height in outlook 2010?
14th September
Hey there Lemuel, what are you seeing? My first instinct would be to add something like p { margin:0; padding:0; line-height:1 } - a simple ‘reset’ like this may help.
15th September
@Bartholemeeeeeeeeow - I’m sorry I didn’t respond earlier. It looks like you’re on to something here and I suspect something has changed in Outlook since I originally wrote the post. I’ve updated the post with your method - thanks for your help! :)
20th September
I’ve been testing this solution, but I’ve run into a couple of issues.
1: Apple Mail and iPhone/iPad has a minimum font size of 13px - adding a non breaking space to a table cell causes this functionality to go into affect. To fix this you need to add -webkit-text-size-adjust:none; to the style of the cell.
2: I’m having trouble with Outlook 2007/2010 and this solution - it might be the same issue that Lemuel is referring to.
Table cells with the non breaking space in them and the fix with font-size & line-height applied results in 2 pixels high cells.
It might be an issue with my doctype - I’m looking into this later today.
Has anyone experienced similar issues and found a solution?
20th September
Update:
Different doctypes didn’t seem to have any affect.
But using the old trick with a 1x1 transparent pixel works - but this solution has a negative effect on the “image to text ratio” spam filters use and looks strange in mail clients when images has not been loaded.
11th February
@Martin Madsen-Mygdal and @Lemuel
Changing the 1px line-height to 1% line-height seems to fix the problem.. Tested in litmus with the following code;
<table cellspacing=“0” cellpadding=“0” border=“0”>
<tr>
<td width=“568” height=“1” > </td>
</tr>
<tr>
<td width=“568” height=“1” > </td>
</tr>
<tr>
<td width=“568” height=“1” > </td>
</tr>
</table>
11th February
Ahem code was not allowed so another attempt;
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="568" height="1" style="background:#ff0000;font-size:1px;line-height:1%;"> </td>
</tr>
<tr>
<td width="568" height="1" style="background:#00ff00;font-size:1px;line-height:1px"> </td>
</tr>
<tr>
<td width="568" height="1" style="background:#0000ff;font-size:1px;line-height:1%;"> </td>
</tr>
</table>
22nd February
Another vertical spacing option I found on teh interwebz:
<td 10px; mso-line-height-rule: exactly;”> </td>
Works almost uniformly across the board, and forces Word-based clients to obey the rules! :-)
22nd February
Hi Nick and Chadness, we’re so sorry for the wonkiness with code and our blog comments! We have a very lively discussion in our forums about just this topic and we’d love for you to contribute to it. For one, the forums doesn’t eat code :)
Thanks guys and sorry about the mess here!
5th March
I used the following code and it works with my cell height issue in Outlook 2013 :
<td height=“1” 0; line-height: 0;”> </td>
19th April
Hi - I was running into a similar issue for an email I was working on; it rendered ok everywhere except Outlook 2013. 2013 kept adding extra height to my <tds> thus giving it extra whitespace that I did not intend. I was able to get it fixed by taking the background color off the main table (applied the bgcolor to the <tds>) and applyed this style to the table
—style=“font-size:1px; line-height:0; mso-margin-top-alt:1px;”—
I don’t know if this will help anyone else, but wanted to post it. If this helps one person it’s worth it.
I tested this in Litmus and it did not create any other issues for any of the other ESPs.
Here’s a link to the template where I used this code.
http://link.us.shoptalk-shop.com/YesConnect/HtmlMessagePreview?a=KCiX9ex53Vt4qYGr2kzdZk