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. 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.
Luckily, this can be a quick fix. Addto your body tag and then turn your body selector in your CSS to and you should be all set. Though if you have a 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: