How to fix Outlook.com replacing “body” with “div” in your emails
Update on February 15, 2021: Microsoft has implemented an update, and it seems to be rolling out starting today.
Hey, fellow email geeks. Have you been having issues with your emails in Outlook.com recently? Well, it’s due to a “fun” update that Outlook.com rolled out earlier this week. (Thanks to the Email Geeks Slack community for bringing this to our attention.) Here’s why your emails might be looking funky and how you can fix it.
The problem: Outlook.com’s latest update
Outlook is turning “body” into “div” in the CSS in your head styles. Which doesn’t sound that bad until you realize that any styles you have assigned to your body are now going to be assigned to every div in your email.
Here’s an example of how the email is supposed to look (a two-column block on a white background) versus how it looks in Outlook.com (now in a single column with a transparent background).
If you use <div> tags in any capacity, this has the potential to be a huge problem. As one email geek noticed, if your email is bigger than the viewing window in Outlook.com, your email may appear to disappear when it’s hovered over. Hint: It doesn’t. It’s a feature of Outlook.com that doesn’t play nice with this new development. Thanks to Rémi Parmentier for figuring that out.
The solution
Luckily, this can be a quick fix. Add class=“body” to your body tag and then turn your body selector in your CSS to .body and you should be all set. Though if you have a .body for other styles, you will want to add a different class to solve this specific issue. As always, test to make sure when you fix one issue, you don’t create a new issue in another email client.
Here’s an example of how this fix might look in your code:
<html>
<head>
<style>
.body {
width: 100%; height: 100%;
background-color: white;
}
</style>
</head>
<body class=”body”>
<table style="width:600px;">
<tr>
<td>
Put your email code here.
</td>
</tr>
</table>
</body>
</html>
The downside is you have to implement the fix in all your emails that are going out.
Our solution to that dilemma is to put all our standard CSS in a partial—a global, dynamic, reusable code block—so that we only have to fix it in one place when a big change like this arises. And our updates would automatically be applied to all of our emails with the partial in it.
Always be testing!
The lesson here? Always test your emails so you can catch errors like this as soon as possible. Email clients make updates every two days on average, so skipping out on email testing is a risk you don’t want to take. When an email looks buggy, it leaves a bad impression and negatively impacts email engagement (and conversions!). Protect your brand reputation and ensure a great subscriber experience, every time.
 | Never send a broken email again Broken emails mean less engagement and conversions. Yikes. With Litmus Email Previews, see how your emails look in 90+ email clients, apps, and devices—like Outlook.com—so you can catch errors and fix them for on-brand, error-free emails every time. |
Blog 