Yahoo! Mail Does Not Support the Style Block in Internet Explorer 7 and 8


That’s right, Yahoo! Mail (formerly known as Yahoo! Beta) does NOT support the style block in Internet Explorer 7 and 8. A big thanks to Brian Sisolak @bsisolak at Trilogy Interactive for bringing this to our attention!

So for example, this:

<html>
  <head>
    <style type="text/css">
      p {margin-bottom: 1em; background:#096}
    </style>
  </head>
  <body>
    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>
  </body>
</html>

Will get converted to this:

<html>
  <head>
  </head>
  <body>
    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>
  </body>
</html>

The Fix

Copy your style block to just before the closing body of your email:

<html>
  <head>
  </head>
  <body>
   <p>This is the first paragraph</p>
   <p>This is the second paragraph</p>
   <style type="text/css">
     p {margin-bottom: 1em; background:#096}
   </style>
 </body>
</html>

Up until now, I was convinced that placing the style block in the body tag was an email folklore; the legend of a day long ago when that fix actually worked for Gmail.  Nevertheless, I think the reason that this works is because of the way Yahoo is formatting it’s closing style block.  Moving the block to just below the opening body gave me inconsistent results.

Update 8/16/2011: To add insult to injury, we just realized that sometimes the Outlook 2007 and 2010 clients ignore the style block when it is placed below the body tag and/or just before the closing body. To be extra safe, duplicate your style block in your head tag AND before the closing body tag.

10 thoughts on “Yahoo! Mail Does Not Support the Style Block in Internet Explorer 7 and 8”

  1. Another way to get consistent results accoss all browser / webmail clients is to use inline styles for everything. E.g I find writing the para style in the parent table cell does the trick.

  2. Tried this, but it resulted in loss of some text formatting in Hotmail, and some other bits of height distortion on some table cells in Hotmail and Yahoo! in FF. Can’t quite imagine why, as I’m using Campaign Monitor, and it’s throwing all the styles inline upon sending either way.

  3. Yeah, I am not sure what process CM uses to convert your styles to inline so technically I would need to see the input/output of that conversion.

    However, you are correct, if everything is getting converted correctly and CM is parsing through your embedded styles no matter where the style block is placed, inline styles should trump this glitch in Yahoo.

  4. Is it only Yahoo which does that? I’ve always thought that using inline styles is the only way to be sure that they will not be stripped and putting anything in the head of the document a no-no.

    from Richard@Web Design Leeds

  5. Through trial and error I discovered the best way to include the <style> element is not to. Apply all styling inline and you’ll have a lot less trouble making your newsletter client-compatible.

  6. This is great that you guys figured this out (duplicating the style block for Outlook and placing it in the body for Yahoo), but your validation tool first adds it and then complains that it’s there. Took me a bit to figure out that it was all that it should be.

  7. @Todmund
    The validation tool uses the rules and standards set by the W3C. We are intentionally breaking those rules (because some of the email clients don’t follow them properly), but we still give you a full validation report based on W3C standards. This is why our optimization (or other techniques) sometimes introduce validation errors. It is possible that all email clients will move to comply with W3C standards, but until then a little rule breaking is necessary.

  8. @Geoff That completely makes sense and you have a great product that helps break just the right rules in just the right ways. I don’t even know if this is possible, but if you could help give us feedback after the fact that our email is still the best it could be (e.g. we are “correctly” breaking the rules) that would be awesome!

Leave a Reply

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

Free Email Goodies