Click to Sign Up for a 7 Day Free Trial!

Email Development

Firing Blanks with Outlook.com

Email On Acid

♪♫ 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?

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.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

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

<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000" style="max-width: 600px;">
David
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
Sarah
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 <code> tag from my stylesheet comments
Scott Gatz
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.
Colin Firth
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...
Alan Bauchop
I LOVE you Microsoft. Thanks for making me change every email template I have created.
Kerry
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.
Harry
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
Peter
@Pete,
Sorry, but we're not able to troubleshoot login issues. Hopefully Microsoft will come up with some better ideas for you!
Geoff Phillips
I can confirm this is STILL happening.

Thank you, Microsoft for the grief mad
Andrew Low
Thanks, saved me from having to pick up the shovel myself! smile
Gert
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.
Alan Swan
David, try not to give your table a width but the td inside. Works awesome.. mobile first without mediaqueries:

So instead of:
<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000" style="max-width: 600px;">

Do:
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tr>
<td style="width: 600px; max-width: 600px; height: 30px">

Cheers!
Martijn
Good to determine all people posting! Great luck to all, except against me!
Al Soberanes
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.
clevelanddesign
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>
Tom
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,
Frank
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!
Geoff Phillips
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!
Frank
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
Melissa
Melissa,
You should be able to find your email's style block in the <head> section, just before the <body> tag in most cases.
Geoff Phillips
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.
Melissa
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.
Kevin

Leave a Comment