Outlook 2013 doesn’t respect height in empty table cells

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;">&nbsp;</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.

Use #cccccc, not #ccc (and definitely not RGB)

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!

Posted by Ros Hodgekiss

29 Comments

  • James
    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.

  • James
    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?

  • Ros Hodgekiss
    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?

  • Felix Zapata
    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>

  • Felix Zapata
    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.

  • Rasmus
    22nd August

    Will you need a font-size=“1” if you just place a small dot_trans.png 1px*1px image within the cell?

  • Bartholemeeeeeeeeow
    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.

  • Bartholemeeeeeeeeow
    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.

  • Lemuel
    14th September

    any tricks to fix the line-height in outlook 2010?

  • Ros Hodgekiss
    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.

  • Ros Hodgekiss
    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! :)

  • Martin Madsen-Mygdal
    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?

  • Martin Madsen-Mygdal
    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.

  • Nick vd Berg
    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>

     

  • Nick vd Berg
    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%;">&nbsp;</td>
    </tr> 
    <tr> 
      <td width="568" height="1" style="background:#00ff00;font-size:1px;line-height:1px">&nbsp;</td>
    </tr> 
    <tr> 
      <td width="568" height="1" style="background:#0000ff;font-size:1px;line-height:1%;">&nbsp;</td>
    </tr>
    </table>

  • Chadness
    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!  :-)

  • Ros Hodgekiss
    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!

  • Vannkorn
    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>

  • HNelson
    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

  • Alex
    23rd May

    Dont forget that it replaces tags with <div> tabs, i even replaced my tags with <div> tabs and it adds another <div> tab…. it driving me crazy

  • Gaurav Chopra
    11th July

    I have come across this issue and have yet to be able to find a solution to it. With an html e-mail I have found that in some Outlook programs it will collapse the cell. Both 2007/2010 For instance:

    <tr>
      <td witdh=“10”><img></td>
      <td witdh=“80”>Copy</td>
      <td witdh=“10”><img></td>
    </tr>
    What happens is that Outlook ignores the width of the middle column’s cell. It also doesn’t matter if I use CSS for the widths.

  • Ros Hodgekiss
    12th July

    Hi Gaurav, I noticed you have a recurring typo above - “witdh” should be “width”. That may be the cause of widths not being respected. Feel free to post in our forums if you come across further issues :)

  • Luís Dalmolin
    17th September

    Anyone knows why this code breaks only in Outloook 2013?

    <tr>
      <td width=“25” height=“45”>header_r3_c1.jpg</td>
      <td width=“253” height=“45”  1px; line-height: 1px; mso-line-height-rule: exactly; -webkit-text-size-adjust:none;”>
          <singleline label=“Data”>Caxias do Sul, 29 de janeiro de 2013.</singleline>
      </td>
      <td width=“324” height=“45”>header_r3_c3.jpg</td>
    </tr>

  • Ros Hodgekiss
    18th September

    Hi there Luís, could you kindly post your full code in our forums? I think our commenting system is gobbling up your tags etc :P

  • Josh Marsters
    29th October

    The suggestions in the comments didn’t seem to work for me. Some of them fixed the issue in Outlook 2013 but caused issues in 2007/2010 where the <td> would be rendered as 2px tall.

    I found the following solution through lots of trial and error:

    <td width=“711” height=“1” bgcolor=”#CACAC6” > </td>

    This fixes the issue in Outlook 2007/2010/2013

  • Ros Hodgekiss
    1st November

    Thanks for sharing this solution, plus the great heads up! We’ll def keep this in mind :)

  • Peter
    1st November

    Josh, it looks like your solution was destroyed when you posted it!

  • Richard Bland
    13th December

    What about widths set at 1px? Will Outlook 2013 have issues with this as well?

    I am coding a template and are using height 1px and width 1px to create a border around the main content area, rather than using borders or images.

    Will this break, I have yet to test it and this blog piece caught my eye.

  • Ros Hodgekiss
    14th December

    Hi Richard, widths seem to be unaffected - however, make sure you include cellpadding=“0” cellspacing=“0” and border-collapse: collapse; to get around potential issues. You might want to check out the code generated for small images by pixlcodr.com - they’ve been working extensively to solve issues in Outlook 2013, so their list of caveats is worth a look :)

Got something to add?

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

Create an account