Hotmail: Change to .ReadMsgBody .ExternalClass

Hotmail has updated their external stylesheet to add:

.ReadMsgBody .ExternalClass
{display:inline-block;}

Because of this:

1.) standard body / wrappers set to 100% have been cut short to read only the largest declared width not in percentage

:(

2.) all body / wrappers are left aligned

(╯°□°)╯︵ <ǝןqɐʇ>

Previous fixes is now ignored as our stylesheet:

.ReadMsgBody .ExternalClass
{display:block;}

becomes this after they apply their external classes:

.ExternalClass .ecxReadMsgBody .ecxExternalClass
{display:block;}

Result:
screenshot >

Any thoughts? For now it looks like the Hotmail team decided full screen colored backgrounds were not up to their design standards and also that they would prefer all newsletters be left aligned.

A fix escapes me at the moment: I'll be hunting and I hope you are too.

gwlabarre, 1 year ago

Nevermind - found it!

To fix apply:

.ExternalClass
{display:block !important;}
roshodgekiss roshodgekiss, 1 year ago

Superb sleuthing! Thank you so much for sharing your fix - I've found that when all else fails in email, !important is often the answer.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 1 year ago

I just tested the code I've been using for a long time to do full-backgrounds in Hotmail, and the fix you suggest is not necessary.

I suspect that you may be forgetting to set width on .ExternalClass as well... or something similar. Here's what I use:

.ReadMsgBody, .ExternalClass {width: 100% !important;}

Just tested this today and it still works.

By the way - I love your <table> flip.

roshodgekiss roshodgekiss, 1 year ago

By the way - I love your <table> flip.

Haha, that's me, everyday :) Thanks for your advice!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 1 year ago

I just discovered that I am (seemingly) getting inconsistent results with the code I posted above. I swear to you it was working before, but now I'm not so sure.

It seems that whenever you specify something on "body," Hotmail will now convert that to use the class name ".ExternalClass" - which means you should be able to use this:

body {width: 100% !important;}

or this:

body {display: block !important;}

Both of these seem to work just fine as of today. Do you think it has anything to do with their recent push for using Outlook.com? Do they share some of the same functions which handle this sort of thing?

Additionally, I've found that getting a background to work properly in older versions of Outlook is simple if you have something like this:

<body style="background: #ff0000; margin: 0; padding: 0;">
    <div style="background: #ff0000; height: 100%; width: 100%;">
       <!-- Your table stuff -->
    </div>
</body>

I've found that this provides a fallback in case one or the other does not work. I would be interested to know if there are simpler solutions out there for full-bleed background colors.

roshodgekiss roshodgekiss, 1 year ago

Hey there erikwoods, it is very possible that Outlook.com has changed something here, so we'll keep an eye on things from our end. Out of curiosity, do you find wrapping your content in a div more effective than nesting it in a table?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 1 year ago
roshodgekiss wrote:

Hey there erikwoods, it is very possible that Outlook.com has changed something here, so we'll keep an eye on things from our end. Out of curiosity, do you find wrapping your content in a div more effective than nesting it in a table?

I've found that the important part about the div is setting its height to 100%. I apologize that I do not have my original screenshots or test results back from like... 2008 when I did this, but.... I found that if you only put background on <body> or a <table> wrapper (for lack of a better term), it will only extend to the bottom of the content, as opposed to the bottom of the reading pane.

Oh and this only applies to certain versions of Outlook. Again I apologize for not having my old test results - they could very well be out of date by now.

You know what I mean? Also... in case I wasn't clear on this.... it's only in regards to having a full-bleed background color. I'm sure you understood that, but for posterity and other readers, I thought I should clarify.

roshodgekiss roshodgekiss, 1 year ago

No, this is great - thank you for the clarification here! We should sit down and do some testing ourselves :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 1 year ago

Interesting stuff, does this DIV solution cause issues with Outlook 2007+'s page break on long containers?

jackburton, 1 year ago

Wow I was just wondering the same question until I came to this forum! I had the same problems until gwlabarre posted the solution. You guys are great, thanks for all the help!
-------------------------
Jack
Best AMD APU's

erikwoods erikwoods, 1 year ago
Redferret wrote:

Interesting stuff, does this DIV solution cause issues with Outlook 2007+'s page break on long containers?

Good question.
If you want my opinion: keep your emails simple.
Although... I realize you may not have complete control over that, depending on your situation.

erikwoods erikwoods, 1 year ago
jackburton wrote:

Wow I was just wondering the same question until I came to this forum! I had the same problems until gwlabarre posted the solution. You guys are great, thanks for all the help!
-------------------------
Jack
Best AMD APU's

Be sure to check out my post from a week ago, Jack. For reference, it says:

It seems that whenever you specify something on "body," Hotmail will now convert that to use the class name ".ExternalClass" - which means you should be able to use this:

body {width: 100% !important;}

or this:

body {display: block !important;}
erikwoods erikwoods, 1 year ago

By the way. Update on this.
It seems that now that Hotmail is forcing users to switch to Outlook.com, that you no longer need width: 100% or display: block for full-bleed backgrounds in your emails.

Please update me if anyone has found otherwise.

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

Create an account