{"id":23969,"date":"2021-02-12T13:03:12","date_gmt":"2021-02-12T18:03:12","guid":{"rendered":"https:\/\/www.litmus.com\/?p=23969"},"modified":"2025-12-18T16:50:38","modified_gmt":"2025-12-18T21:50:38","slug":"how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","title":{"rendered":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

Update on February 15, 2021: Microsoft has implemented an update<\/a>, and it seems to be rolling out starting today.<\/em><\/p>\n

Hey, fellow email geeks. Have you been having issues with your emails in Outlook.com recently? Well, it\u2019s due to a \u201cfun\u201d update that Outlook.com rolled out earlier this week. (Thanks to the Email Geeks Slack community<\/a> for bringing this to our attention.) Here\u2019s why your emails might be looking funky and how you can fix it.<\/p>\n

The problem: Outlook.com\u2019s latest update<\/h2>\n

Outlook is turning \u201cbody\u201d into \u201cdiv\u201d in the CSS in your head styles. Which doesn\u2019t 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.<\/p>\n

Here\u2019s 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).<\/p>\n\"Outlook.com\n

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\u2019s hovered over. Hint: It doesn\u2019t. It\u2019s a feature of Outlook.com that doesn\u2019t play nice with this new development. Thanks to R\u00e9mi Parmentier<\/a> for figuring that out.<\/p>\n

The solution<\/h2>\n

Luckily, this can be a quick fix. Add class=\u201cbody\u201d<\/span> to your body tag and then turn your body selector in your CSS to .body<\/span> and you should be all set. Though if you have a .body<\/span> 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\u2019t create a new issue in another email client.<\/p>\n

Here\u2019s an example of how this fix might look in your code:<\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n\n

<html>\n<head>\n  <style>\n  .body {\n    width: 100%; height: 100%;\n    background-color: white;\n  }\n  <\/style>\n  <\/head>\n  <body class=\u201dbody\u201d>\n  <table style=\"width:600px;\">\n    <tr>\n    \t<td>\n          Put your email code here.\n    \t<\/td>\n    <\/tr>\n  <\/table>\n  <\/body>\n<\/html><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
The downside is you have to implement the fix in all your emails that are going out.<\/p>\n
Our solution to that dilemma is to put all our standard CSS in a partial<\/a>\u2014a global, dynamic, reusable code block\u2014so 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.<\/p>\n
Always be testing!<\/h2>\n
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<\/a> on average, so skipping out on email testing is a risk you don\u2019t 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.<\/p>\n
\n\n\n\n
\"Litmus<\/td>\n\n
Never send a broken email again<\/strong><\/p>\n
Broken emails mean less engagement and conversions. Yikes. With Litmus Email Previews<\/a>, see how your emails look in 90+ email clients, apps, and devices\u2014like Outlook.com\u2014so you can catch errors and fix them for on-brand, error-free emails every time.<\/p>\n
Book a demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Find out how to fix your emails after Outlook.com’s latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.<\/p>\n","protected":false},"author":1,"featured_media":23980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[1384,10254],"blog_category":[53],"class_list":["post-23969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-bug-reporting","tag-preview","blog_category-tips-resources"],"yoast_head":"\nHow to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails - Litmus<\/title>\n<meta name=\"description\" content=\"Find out how to fix your emails after Outlook.com's latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails\" \/>\n<meta property=\"og:description\" content=\"Find out how to fix your emails after Outlook.com's latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-12T18:03:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T21:50:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails - Litmus","description":"Find out how to fix your emails after Outlook.com's latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","og_locale":"en_US","og_type":"article","og_title":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails","og_description":"Find out how to fix your emails after Outlook.com's latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-02-12T18:03:12+00:00","article_modified_time":"2025-12-18T21:50:38+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails"},"author":{"name":"litmusadmin","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/558abbd8f270d945597fe17cbc04e4f2"},"headline":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails","datePublished":"2021-02-12T18:03:12+00:00","dateModified":"2025-12-18T21:50:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails"},"wordCount":12,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png","keywords":["Bug Reporting","Preview"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","url":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails","name":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png","datePublished":"2021-02-12T18:03:12+00:00","dateModified":"2025-12-18T21:50:38+00:00","description":"Find out how to fix your emails after Outlook.com's latest update that turns the body selector into a div in your CSS, making your body tag into a div tag.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/outlook-bug-fix.png","width":1380,"height":725,"caption":"Outlook email bug fix"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-outlook-com-replacing-body-with-div-in-your-emails#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to fix Outlook.com replacing \u201cbody\u201d with \u201cdiv\u201d in your emails"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/558abbd8f270d945597fe17cbc04e4f2","name":"litmusadmin"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/23969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=23969"}],"version-history":[{"count":2,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/23969\/revisions"}],"predecessor-version":[{"id":121735,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/23969\/revisions\/121735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/23980"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=23969"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=23969"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=23969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}