Firing Blanks with Outlook.com


♪♫ It’s a Nice Day for a… White Message ♫♪

We recently came across a problem in Outlook.com where emails were being rendered as a blank white page. Examining the “View email source” showed us that the code had indeed been recieved. So why was the email blank?

Outlook.com blank emails

A little bit of digging…

We tested a few different things with Outlook.com and eventually centered in on the culprit: HTML code included in a comment in the style block. It looked like this:

<style type="text/css">
 /* Link Styles, When using <a href="#" > tags */
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
 h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: red !important; }
</style>

We tried a few different HTML tags in the style block, inside comments and outside, and in every case they caused the email to display as blank. So, if you don’t want to be firing blanks, EOA recommends that you do not include any HTML code in your style block.

23 thoughts on “Firing Blanks with Outlook.com”

  1. Talking about Outlook.com, anybody else can confirm that with the last version of Chrome in Windows, it ignores the max-width property inside a table of 100% width??? It renders ok in Firefox and Explorer, and before in Chrome… But not with the latest version Chrome in outlook.com It works fine in Gmail…

  2. We came across this too a couple of weeks ago, VERY annoying. We ended up adding in each bit of our template section at a time to see where the problem was, before eventually getting to the same conclusion as you, that it was an HTML tag in a CSS comment.

    One other thing we have found is if an email is forwarded from Outlook.com to Yahoo, Yahoo removes the src from all image tags, so they don’t appear. We tried it with several different newsletters, both using our own templates, and from other newsletters we are signed up to, and the same thing happened every time.

    Have you come across this? If so, have you found a fix?

    We tried forwarding from Outlook.com to Yahoo, Outlook.com, 3 versions of Outlook and Apple Mail, and it only happened when you forwarded to Yahoo. Strange!

    Sarah

  3. Thank you so much for posting about this. Had the exact same problem and was clueless about how to fix. It totally works now that I removed the tag from my stylesheet comments

  4. Another one to look out for if removing comments doesn’t help: we discovered that the non-prefixed version of linear-gradient causes outlook.com to display a blank email. It seems to work when all the prefixed versions are there. Superbly odd.

  5. I’d understand if the email rendered and it looked busted – but to simply not render the mail because of some HTML foible?

    Face-palm @ Microsoft.

    wtf…

  6. A little of topic but, is there anyone that is having problems with anchor links on outlook.com? Would you know if it is still supported? Doesn’t seem to work now.

  7. Recently I had two outlook.com accounts open at once. One is a padi account for work and one a personal account. I have to routinely change the password atwork and I was just copy and pasting the new password into and email to send to a coleague in my personal acc. As soon as I saved teh password in eth paid account my personal sadi “sign back in”, which happens from tim eto time if open too long. Well from that moment on my password doesnt work. I can do a pass reset or verify my account easily, but when I get the link and click it- I get a blank white screen. I thought it was because IE10 is not supported so I downgraded to IE8, tried Firefox, Opera, Chrome. I cleared cahe, cookies etc. I tried to copy paste the link. Every time I get a white screen. So I am essentially locked out of my own email because teh password randonly changed on its own. I did try the new and old codes from the paid company account. I have an ongoing dialogue with Microsoft, but they keep telling me to do teh same thing over and over- no success. Any thoughts?

    Thanks,
    Pete

  8. @Pete,
    Sorry, but we’re not able to troubleshoot login issues. Hopefully Microsoft will come up with some better ideas for you!

  9. There has always had some problems with the outlook site in the chrome and the Mozilla Firefox. Thank you for sharing this with us information with us. I also experience the same. Keep on posting more interesting stuffs with us.

  10. David, try not to give your table a width but the td inside. Works awesome.. mobile first without mediaqueries:

    So instead of:

    Do:

    Cheers!

  11. I did not have any comments in my document, but still experienced the problem. I believe when I changed my @import URL for my Google Webfont from ‘//fonts.google….’ to ‘http://fonts.google…’ is started rendering again.

  12. Hi,

    Can anyone please help – I am using code I got from a guide to responsive email building. Some really nice results in everything but Outlook 2010 (outlook.com is fine). I am getting a blank email in Outlook – source code is definitely there – but I don’t think I have any HTML code in my style section

    <style type=”text/css”>

    #outlook a { padding:0; }
    body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    table td {border-collapse: collapse;}
    .ExternalClass * {line-height: 115%;}

    @media screen and (max-width: 630px) {

    *[class=”mobile-column”] {display: block;}

    *[class=”mob-column”] {float: none !important;width: 100% !important;}

    *[class=”hide”] {display:none !important;}

    *[class=”100p”] {width:100% !important; height:auto !important;}

    *[class=”condensed”] {padding-bottom:40px !important; display: block;}

    *[class=”center”] {text-align:center !important; width:100% !important; height:auto !important;}

    *[class=”100pad”] {width:100% !important; padding:20px;}

    *[class=”100padleftright”] {width:100% !important; padding:0 20px 0 20px;}

    *[class=”100padtopbottom”] {width:100% !important; padding:20px 0px 20px 0px;}

    }

    </style>

  13. So, this answers how to not send “blank” emails, not not how to read sent emails. I am all of a sudden getting a bunch of these “white / blank” emails from others. I don’t have any code in my style block and some emails come through fine. This only happens with outlook.com in Chrome, everything is fine when using Firefox. Is there a way to read these “blank” emails in Chrome? This happened randomly about a week ago, I didn’t change anything. Thanks a lot,

  14. Frank,
    The only thing I can suggest is to view the message source. You will be seeing code, so it will not be easy to read. To do this, go to Actions (upper right corner of email when open), and then pick “View message source.”

    Hope that helps!

  15. Thanks. I forgot to mention that if I marked the message as unread or hit reply, the text would appear, just not when the message was “read.” I was also able to read them by “viewing message source” as you suggested. As if this was not strange enough, the problem has not occurred today and I can read the emails that were showing up “white / blank” earlier in the week. Bizarre!

  16. Hi there,

    I am very interested in implementing your solution, as anything I create as a template is going out blank. However, I can’t, for the life of me, figure out where my style block is. Would you be willing to clarify how I get to it? I would greatly appreciate it if so.

    Thank you!

    Melissa

  17. Melissa,
    You should be able to find your email’s style block in the <head> section, just before the <body> tag in most cases.

  18. Thanks, Geoff. I thought I found what I was looking for, but it doesn’t seem to be editable. (Maybe it’s different because I’m not going through Outlook.com? Just using Outlook through my desktop.) I’ll keep poking around.

  19. Thanks for pointing me in the right direction to solve this annoying problem. I didn’t have any HTML in my style definitions, but I did have a background: linear-gradient defined. As soon as I removed that, my newsletters started appearing in Outlook.com again.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies