After Hotmail's butterfly-like re-emergence as Outlook.com last year, we were certain there would be changes. However, we didn't think they'd be as trivial, yet as utterly maddening as dropping support for the margin CSS property.
Naturally, it didn't take long for our email designer friends to notice that without margins, elements in their email newsletters were collapsing into each other like bros at a Twister party. Our forums almost immediately lit up with reports that spacing between paragraphs, images and articles had vanished with margin and its variants - margin-top, margin-right, margin-bottom and margin-left.
Our first response was 'well wait, there has to be a workaround'. So we proceeded to hack away with attribute selectors, !important and even the esoteric .ExternalClass. Every time, Outlook.com stripped all mentions of margin from our HTML email code, simply leaving tantalizing semi-colons, like prawn tails after a seafood dinner.
The ever-observant Email On Acid were quick to the scene, with an in-depth post on Outlook.com's lack of margin support. In the absence of a workaround, they provided a great nugget of advice:
Though it will never work in quite the same way as margin, the padding property can be used in many places where margin would have been ideal. Just remember that padding goes inside the border of an HTML element, whereas margin goes outside the border.'Emailology: Outlook.com Margin-alizes CSS Properties', Email on Acid
We also recommend going back to roots and using table cells and the cellpadding and cellspacing attributes where possible. These are the cornerstones to a truly bulletproof HTML email layout.
Although this will affect far less designs, it's worth mentioning that Outlook.com has also dropped support for the float CSS property. This has traditionally had fairly mediocre support in email clients anyway, so we've generally recommended using the align HTML attribute instead.
Finally, don't forget to test your existing email designs and templates again in Outlook.com/Hotmail. You may be in for a bit of extra work during what's generally a quiet part of the year! We'll be updating our CSS support in email guide very soon to reflect these changes.
Has Outlook.com's decision to drop margin affected you? Let us know in the comments below.
29th January
I applaud Microsoft’s efforts of keeping us marketing folks and template designers in business.
But, on a more serious note, WTFF?
29th January
Padding doesn’t really work in the later versions of Outlook for block level elements like divs, in fact the previous fix was to use margins! So now we have a situation where you can’t really use either if you want your emails to look the same across all of Microsoft’s horrific platforms.
Have they declared war on email marketing?
29th January
They’re being ignorant, trying to please those who send text based emails, while ignoring the growing chunk of the inbox that is opted in content. If the user wants it, but can’t view it properly then Hotmail fail in their most basic of functions, allowing people to receive and read the emails they want!
There needs to be a push for some sort of strictly defined Email HTML standard, the Email Standards Project was more criticism than proposal, lets make a standard thats conservative (no float/z—index etc..) but scalable (for mobiles) and most important consistent for the user.
Thats m rant over
30th January
…just waiting for the day we actually hear some positive, progressive news from Microsoft and email.
30th January
Thanks for the props Ros! Much appreciated! (John from EOA)
30th January
I’ve just avoided margin in general and used an extra column or row as needed when there’s space between things. Not ideal, but also never seems to break. :)
30th January
The loops that email clients are forcing us to jump through to get HTML email reminds me of those nightmares you have where everything is going terribly, horribly wrong, and then you wake up and realize that things are normal-
Except without the waking-up part.
30th January
Is there any information as to why they they *removed* a rendering feature?
I’m curious as to what is it at Microsoft’s culture that creates such awful, backwards HTML rendering in their products. Do they still frown on it? That’s so ‘90’s.
30th January
I’m also curious about why Outlook insists on disabling such basic inline styles. If rendering emails using MS Word wasn’t bad enough, this seems like another step back without any benefit for outlook or MS.
30th January
The main problem is that it’s setting the margins on tags.
We found that by switching all the tags to <span> tags and switching out their margins for padding on the containing <td>s works pretty well.
You do have to set the text-align and line-height in the containing <td> and any <span>s nested inside your old paragraphs now need to have a set font-size.
This has resulted in even more nested tables (yay) but it seems to work perfectly in our case.
30th January
I can think only of one single reason for removing the margin-feature: By setting a negative margin to a certain direction you can move an element into the invisible space, which might end up in legal issues…
Otherwise: Congratulations Microsoft!
30th January
What’s CSS?
30th January
It’s just one of those decisions that reminds me about when celebrities slide out of a car in a tiny dress and no underwear, only to give photographers a clear up-skirt view. It’s embarrassing Microsoft!
30th January
I’ve been switching out all my s for <span>s like Craig and setting vertical space with a nested table with a height on the <td> (I used to have to support Lotus Notes 6 and never bothered with margin or padding). This has brought good results.
30th January
Doh, my tags didn’t come through. I’m switching out my p tags for spans and using a nested table with a height set on the td.
30th January
Hi Guys,
Can you let us know if this impacts on the template builder and all the mails that have been built by our clients using it?
Cheers
30th January
Bugger!
Time for even more nested tables, I’ll experiment with cellpadding and cellspacing elements too.
Could also look at <!—[if !mso]> conditional comment although that overlaps with outlook 2000-03, hotmail and windows phone.
<!—[if !mso]><h1>GET A NEW EMAIL CLIENT</h1><![endif]—>
30th January
Arrrggghhhh! I’ve already wasted enough of my life hacking to get stuff rendering right in Microsoft products.
ARE THEY DOING THIS ON PURPOSE?
31st January
I’m escalating within Microsoft to see if something can be done. It helped with the emoji issue in the past, hopefully we can get this resolved as well. I have emails I’ve coded for Microsoft that are now breaking, so it should light a fire under someone.
31st January
And here I was thinking that I’d gotten off easy when Outlook.com first came out and it rendered e-mails the same as Hotmail.com.
Hotmail already didn’t recognize any margin other than margin-bottom. Must you take that from me too, Microsoft?
31st January
Margins have been very unreliable in MS Outlook for years. It’s no suprise they were dropped from Outlook.com.
Shame on any coders who have ever used margins for styling.
There are plenty of other styling options: padding, table columns, table rows, image spacers, line-height.
1st February
MarketAgent 007 - That doesn’t explain WHY they have dropped support for it at all. It clearly wasn’t so broken before that people couldn’t use it effectively in the past. I’m sorry, but tables are a better way of doing styling than floats because…? Padding is better than margin because…?
+1 to the many wondering why this change is happening.
1st February
Mike,
I wouldn’t say padding is better than using margins for styling, and I also wouldn’t say tables are better than using floats. It all depends on the scope of the project. I use whatever attribute will work and remain consistent across multiple clients, browsers, devices, and OS. What I will say is margins are great BUT they’re unreliable in MS Outlook, Hotmail, and Outlook.com. So, why would I use an attribute - such as margin - that is unreliable?
As for the reasoning of WHY Outlook.com is dropping support for margin - my guess is that it’s one less headache for Outlook.com to deal with. They probably have enough challenging issues to deal with and it would make their lives easier by simply scratching that issue off their list. They’re well aware of all the other styling options available (tables, padding, etc., etc.).
As for designers and coders, at least they can stop wondering and know for certain that margins aren’t going to work in Outlook.com. Not using margins may save production time during testing.
1st February
You’ve gotta love this “INDUSTRY”. Anyone has his own standards! I share Matt’s opinion on this. I think Microsoft is doing this on purpose.
1st February
why don’t they just used another render engine? WHY!?
I guess they are building on such an old core that there’s no way back anymore. But if they really have passion for the Internet they should build it all over again from scratch…
2nd February
This might piss off email developers and marketing people… But in general, most users could care less about how well HTML renders in email.
2nd February
This just seems ridiculous and a real step backward. As a web developer that currently does have html based emails go out to customers, this is going to make development a bigger headache to already trying reality when it comes to email.
4th February
I’m in awe.
4th February
Why they hate us?
5th February
Our business is a highly regulated business where for leagal reasons emails need to match across platforms and cliens. This change effects not just current mails that we can adjust for, but also previous emails that were perfectly fine a month ago now have to be rebuilt, retested and reintegrated. This causes extra work across many departments, just because they don’t seen to want to support, or create standards. To just take away functionality without warning seems very counterproductive and unnecessarily inconvenient. .
5th February
MarketAgent 007, margin-bottom on p tags has worked fine on all email clients including Microsoft Outlook, Hotmail, and up till recently Outlook.com. It also worked fine on ol/ul tags, as well as margin-left on ol/ul tags.
It doesn’t, however, work on other elements very well. Knowing where things work and how to use them is a part of any coders job, and they shouldn’t be “shamed” for using what has worked.
7th February
With outlook.com and outlook 2013, all models I realized recently are broken. I had to rework everything (except for 2013 because nobody uses it yet): no more margin and padding, and line-height only for progressive enhancement. Microsoft does with its mail clients, it has done so with IE10 browsers: sh*t !
16th February
Are email designs generated with Campaign Monitor’s template builder impacted?
16th February
Kristy, we’ve taken a look at templates from our builder and they’ve held up well. You can view a very basic test I performed just earlier.
21st February
I hope Yahoo!, Google and Microsoft read this… Seeing as they are the only companies that matter when it comes to E-Mail clients.
Stop using your built-in piece of junk code to render our HTML E-Mails. Let the browsers render them… Microsoft, quit using Microsoft Word or some variant of Microsoft Word to render our e-mails. Microsoft is obviously a hot mess and wasn’t meant to render HTML. At least, for your sake use a variation of Internet Explorer’s rendering engine to render out HTML e-mails.
Google, use the Webkit rendering engine, instead of your built in crap.
Yahoo! Follow the Webkit lead.
These companies are expecting plain-text e-mails, which is fine when it comes to direct communication. But, I think we all would rather see some progress being made in this field, instead of taking steps back like Outlook.com.
Microsoft, I like you, but this little stunt you pulled just set yourself up for a lot more hate than the Outlook client brought you.
Thanks.
22nd February
Folks, one thing I have not seen here, as far as I can tell, is a solution that will work for non-coding clients using a template that we’ve built for them. Margins on paragraphs allows paragraph spacing that carries over to each new paragraph created with a hard return within the editor. Do any of these other solutions do that? As far as I can tell, they do not, and the only workaround I can imagine at the moment is to make single-paragraph layouts within the repeaters, forcing the user to insert a new layout unit for every paragraph. So not impressive.
22nd February
Thanks for this article! It looks like I’ll be revisiting some of our organization’s most popular email templates . . . I tend to use margin only for small styling purposes, since support for margin-top in Hotmail and certain elements within Outlook 2007-2010 has always been lacking, but still. This is retarded, Microsoft.
22nd February
That awful thought had occurred to me, too, Patrick. Single paragraph layouts will be a very awkward sell to clients who need to manage their own email content and want to include more than just story teasers and links in their messages.
22nd February
I think the Email Standards Project should take an aggressive approach to press Gmail, Hotmail and Yahoo to make email CSS more standard and complaint, if not email marketing will always be like struggling to IE6 constantly
22nd February
@Patrick As far as I can tell, Outlook.com does still apply margins between paragraphs automatically. The problem, I think, is with margins you’ve explicitly set on elements using CSS will be stripped. Just leave your paragraphs alone and they should render as expected.
Like you, I did a double take when I read this article, but testing a client’s template in Outlook.com reassured me that paragraph spacing was indeed retained. MS are short sighted, but I don’t think they are suicidal!
24th February
Sigh. Some standards would be nice.
Great work Microsoft.
25th February
Use table rows and columns for your spacing, not margin or padding. There are plenty of other clients out there that render these things very differently; take control by defaulting to Netscape 3 style html font tags too.
I too have to say wtf Outlook, why go backwards?
7th April
Software = politics!
17th May
I downloaded one of the free templates from CM that is responsive, but it won’t even load at all in outlook/hotmail.
Ideas?
18th May
Hi Katrina, thank you so much for your message on our Facebook page, too. Just to reiterate what we said there, so far, we believe Outlook is taking issue with our ‘Simple Announcement’ template. If you are having issues with a different template, please let us know.
We are planning to update our templates in the coming days to fix this issue. In the interim, you can fix this yourself by exporting the created template, then finding and removing the <code _tmplitem=“635” > tag from the HTML email code. Once done, simply ‘Update’ the template and all should be well.
Sorry about this trouble, if there’s anything else we can do to assist, don’t hesitate to let us know about it.