Search

Blog

Repurpose your Images for Mobile Email

10.19.2011

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

By Michelle Klann
August 1, 2011

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.

Comments

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.

By Robert Skinn on 08/16/2011

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.

By P McKern on 08/18/2011

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.

By Michelle Klann on 08/18/2011

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

By RichardBeckett on 09/06/2011

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.

By randomnewb on 10/19/2011

Unfortunately some embedded styles are required, particularly for email clients like Hotmail. For examples and more specifics, check out or boilerplate on Emailology.org.

By Michelle Klann on 10/19/2011

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Blog

Search

Blog

Repurpose your Images for Mobile Email

Yahoo! Mail does not support the Style Block in Internet Explorer 7 and 8

The Fix

Comments

Share Your Comment

Recent Blog Posts

Site Search