Yahoo Beta Ignores the Body Tag


Although Yahoo still refers to its new email client as “Yahoo Beta,” this app has been live to the public for quite some time now. Yahoo has also been quite aggressive in getting current users to make the switch to the Beta version. With that said, if you design and develop HTML emails for a living, here’s something that is very important to know:

Yahoo Beta strips your entire body tag along with each of its attributes.

For example, this:

<body style=" background-color: #CEE2DF">

Will get converted to this:

<body>
   <div class="tripane content">
     <div class="msg-body inner undoreset">
       <div>

To get around this, you can define your styles in the “body” type selector in your embedded CSS. From there, Yahoo Beta will convert your embedded body styles to inline and place them inside the div it creates around your email content.

For example, this:

<style>
   body {background-color: #CEE2DF}
</style>
<body>

Will get converted to this:

<body>
  <div class="tripane content">
    <div class="msg-body inner undoreset">
      <div style=" background-color: #CEE2DF">

Bada bing right? But wait, there’s more to this one…

Let’s not forget that Gmail does the EXACT opposite. As many of you already know, Gmail does not support embedded CSS and it also converts your body tag to a div. Gmail is different from Yahoo Beta because it actually acquires your body attributes into the div that it inserts.

For example, this:

<body style="background-color: #CEE2DF">

Will get converted to this:

<div style="background-color: #CEE2DF">

So the best solution in this case is to use embedded CSS AND inline styles for your body, for example:

<style>
  body {background-color: #CEE2DF}
</style>
<body style="background-color: #CEE2DF">

This solution should work for all of the email clients that we currently support.

One last thing to consider…

Obviously divs operate a little differently than a body tag, especially when it comes to background colors and images. Since your content will get placed inside a div, you might want to add a min-height to the mix:

<style>
   body {background-color: #CEE2DF; min-height: 700px}
</style>
<body style="background-color: #CEE2DF; min-height: 700px">

So what’s with all the other divs that Yahoo Beta is inserting? Click here to learn more about how they might affect your layout.

3 thoughts on “Yahoo Beta Ignores the Body Tag”

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies