Home Resources Blog

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 hexadecimal 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!

  • James

    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

    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

    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

    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

    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

    Will you need a font-size=”1″ if you just place a small https://www.campaignmonitor.com/assets/uploads/dot_trans.png 1px*1px image within the cell?

  • Bartholemeeeeeeeeow

    Outlook 2013 gets small cell heights (or even cells with small spacer gifs) wrong.
    <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><img src=”https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/image.gif” width=”620″ height=”17″ alt=”” border=”0″/></td>

    if this issue occurs where

    setting line-height on the tr will also work.

  • Bartholemeeeeeeeeow

    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=”https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/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

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

  • Ros Hodgekiss

    Hey there Lemuel, what are you seeing? My first instinct would be to add something like p &#123 margin:0; padding:0; line-height:1 &#125 – a simple ‘reset’ like this may help.

  • Ros Hodgekiss

    @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

    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

    Different doctypes didn’t seem to have any affect.

    But using the old trick with a 1×1 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

    @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″>
    <td width=”568″ height=”1″> </td>
    <td width=”568″ height=”1″> </td>
    <td width=”568″ height=”1″> </td>

  • Nick vd Berg

    Ahem code was not allowed so another attempt;

    <table cellspacing=”0″ cellpadding=”0″ border=”0″>
    <td width=”568″ height=”1″ style=”background:#ff0000;font-size:1px;line-height:1%;”>&nbsp;</td>
    <td width=”568″ height=”1″ style=”background:#00ff00;font-size:1px;line-height:1px”>&nbsp;</td>
    <td width=”568″ height=”1″ style=”background:#0000ff;font-size:1px;line-height:1%;”>&nbsp;</td>

  • Chadness

    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

    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

    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

    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.

  • Alex

    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

    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:

    <td witdh=”10″><img></td>
    <td witdh=”80″>Copy</td>
    <td witdh=”10″><img></td>
    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

    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

    Anyone knows why this code breaks only in Outloook 2013?

    <td width=”25″ height=”45″><img src=”https://www.campaignmonitor.com/assets/uploads/header_r3_c1.jpg” width=”25″ height=”45″ border=”0″ alt=””/></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 width=”324″ height=”45″><img src=”https://www.campaignmonitor.com/assets/uploads/header_r3_c3.jpg” width=”324″ height=”45″ border=”0″ alt=””/></td>

  • Ros Hodgekiss

    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

    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

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

  • Peter

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

  • Richard Bland

    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

    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 :)

  • Dan

    Ros, bless you! the cell height bugbear was driving me to distraction. I went through a dozen other posts until, thankfully, i arrived here. You saved my template and my mind.

  • Ros Hodgekiss

    Thanks, Dan – that’s amazing to hear! Glad I could help out :D

  • Yannick

    We also faced this Outlook 2013 issue in our Instacut project, and we have solved it by just setting the line-height of the parent equal to the image height of the contained img when it is smaller than 20px. At least, it seems to have passed our own tests.

  • Holly

    Three years later, and this was still the answer to my problem. Thanks!

  • Ros Hodgekiss

    You’re welcome, Holly – glad this is still useful! :D

  • Jordan

    where should i write the code to use it?
    thank you…

  • Ros Hodgekiss

    Hi there, Jordan! You may want to get started first with our Guide to Coding Emails. Hopefully this will give you a good first step towards using some of the techniques in this blog :)

  • Rhys Harry

    This has helped us clear up some frustrating MSO issues, huge thanks.

    We’ve had some similar issues with 1px x 1px cells in other programs, mainly older versions of Mac Mail.

    Replacing   with other characters such as &hairsp seems to fix these but does anyone know if this has any negative effects elsewhere?

  • Rhys Harry

    When will I learn not to post code here, sorry!

    Regarding above post, we replaced nbsp with hairsp

  • Rhys Harry

    Actually, using a narrow no break space (#8239) seems to behave better than a hairspace.

    I’ll stop now!

  • Ros Hodgekiss

    Haha, you can keep on going Rhys – or perhaps post your code on the forums, as that tends to work a bit better :)

    I don’t see any issues with using symbol entities like hairsp – by all means, let us know if you notice anything amiss.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free