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!

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

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

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

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

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

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

  • Outlook 2013 gets small cell heights (or even cells with small spacer gifs) wrong.
    Fix:

    if during a litmus test random gaps appear around some images (Doesn’t seem to happen all the time)

    if this issue occurs where

    image image image

    setting line-height on the tr will also work.

  • 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;”>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.

  • Update:
    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.

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

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

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

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

  • Another vertical spacing option I found on teh interwebz:

     

    Works almost uniformly across the board, and forces Word-based clients to obey the rules! :-)

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

  • Nick vd Berg

    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>

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

     
     
     
  • I used the following code and it works with my cell height issue in Outlook 2013 :

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

  • Dont forget that it replaces

    tags with

    tabs, i even replaced my

    tags with

    tabs and it adds another
    tab…. it driving me crazy
  • 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:

    Copy

    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.

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

    Caxias do Sul, 29 de janeiro de 2013.

  • 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

  • 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 would be rendered as 2px tall.

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

     

    This fixes the issue in Outlook 2007/2010/2013

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

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

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

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

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

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

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

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

  • Jordan

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

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

  • 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   seems to fix these but does anyone know if this has any negative effects elsewhere?

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

    Regarding above post, we replaced nbsp with hairsp

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

    I’ll stop now!

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

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

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

Get started for free
1-888-533-8098 0800 161 5300