A Guide to CSS Support in Email

Update: This study has since been superceded by the new and improved 2008 Edition

Since the rise of Internet Explorer, web designers have had to test their designs across multiple web browsers. No one likes it, but we've all copped it on the chin, written a few hacks and moved on with our lives. After all, 3 to 4 browsers aint that bad - and they finally seem to be getting their act together.

If Internet Explorer is the schoolyard bully making our web design lives a little harder, then Hotmail, Lotus Notes and Eudora are serial killers making our email design lives hell. Yes, it's really that bad.

Inspired by the fantastic work of Xavier Frenette, we decided to put each of the popular email environments to the test and finalize once and for all what CSS is and isn't supported out there.

Posted in:

199 Comments

  1. Thats great. Thanks for your work.

  2. Excellent informations! Thank you for your work and sharing your knowledge

  3. If you are sending HTML emails in your marketing campaigns (and there’s lots to support that you should) you have probably come across some serious design issues when it comes to using CSS styling. I ran across a very comprehensive article over at Campaign Monitor that outlines what CSS elements, selectors and properties are and are not supported by the various email client environments such as Outlook and Yahoo.
    this is good idea

  4. However, have you ever tried testing iCalendar emails (ex. meeting request) with html body in Outlook. CSS support is minimal at best. The following are not supported for sure: background-color, border.

  5. awesome post… exactly what i was looking for

  6. I have already been using a CSS-based email solution and am just about to build a simple email MailBuild template for a new client and was wondering why there are 3 table-based templates in the Resources 3-pack whereas there exists a CSS-based template elsewhere on this site.

  7. Bwin, all of the templates we provide are actually table-based to a certain extent, as that’s the only way to achieve consistent rendering across the board. The newer templates have less reliance on tables for layout and make better use of CSS, but they still use tables for basic page structure.

  8. Great work, i was go crazy to make a template compatible with all clients and webmails.

  9. I have an HTML mail merge email going out with an invoice section i’d like printed on its own page.

  10. Good article , thank You

  11. Thanks a mil. That’s what I need!

  12. This is awesome.  Like some of the above comments you kind of guess sometimes what supports what because you just don’t have the time to test it all sometimes.

  13. Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more.

  14. This is very helpful, and I find it an excellent resource. Thanks.

  15. Thanks for all, very good and helpful

  16. Thats great. Thanks for your work.

  17. xcellent. This is confirmation that we are not insane. Great resource!

  18. I was using css in my mails without knowing this could be such a problem for all those different mail agents. I think I’m going to point this out in my class. Again it’s sad to see that the battle for consistency among utilities is going on…

  19. Very well made article. MAny thanks for chart with Eudora. It will save lot of time!

  20. Good article.
    Thanks for sharing.
    Regards from Poland.

  21. Very nice, I was just creating a new email template and wondered what the support for CSS was in email clients? You more than answered my question. Kudos.

  22. I was using css in my mails without knowing this could be such a problem for all those different mail agents

  23. It is good to know that there are lots of people doing lots of work for me

  24. Very useful post. Thanks.

  25. Yes! You have answer on one of my question for creating HTML emails .. many thanks!

  26. Does anyone have any experience with receiving html campaigns in Yahoo Mail “Beta”. I received a message from someone that had both html and plain text content but Yahoo Mail Beta displayed the plain text first (it actually displayed it twice; one below the other) and then displayed the html content. Pretty weird. Any feedback on your experience with the new Yahoo Mail? The style tag was part of the tag and Yahoo Mail Beta actually displayed the css code as part of the message.

  27. There are many useful informations in this great article‚ĶI really enjoy reading the whole blog that you write.  Thanks!...

  28. Thanks very much! This saves me a lot of time.

  29. Thanks for sharing this..
    It saved me a lot of time trying to figure out why my efforts were going in vein..

  30. Bloody email clients.

  31. Thank you for posting this, bookmarked for reference.

  32. I was using css in my mails without knowing this could be such a problem for all those different mail agents

  33. Thank you for posting this, bookmarked for reference.

  34. Awesome list!!! im being introduced to email based advertising and this is an essential website!

  35. Great detailed article. Thank you for all of the hard work. We’ll definitely be putting this to good use.

  36. One very good post! It’s good to see up-to-date information on such a technical subject. I’d certainly like an html coder who can produce an email template to cover this! Any takers?

    I’d like to get some input on cutting-edge email forms.

    Please”>http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_support_in_emai.html”>Please Contact Me

  37. Now I know why my email does not display correctly under Lotus Notes. Thanks for the sharing the chart.

  38. Excellent information.

    Thanks for sharing such a good info.

  39. Wonderful and informative web site.I used information from that site its great.

  40. Thanks for the information. It is an useful article for me ;)

  41. I hope that this isn’t a stupid question, is a element CSS? I’m a little fuzzy with what is CSS formatting and what is HTML.

  42. Sorry, some words disappeared. I hope that this isn’t a stupid question, is a style element CSS? I’m a little fuzzy with what is CSS formatting and what is HTML.

  43. : Evden Eve Nakliyat , Ofisten Ofise Taşımacılık, Şehirlerarası Taşımacılık, Şehirlerarası Nakliyat evden eve nakliyat, ofisten ofise nakliyat, nakliyat firması, ofisten ofise taşımacılık şirketleri, şehirlerarası nakliyat, özel eşya taşımacılığı, gıda taşımacılığı, şirket taşımacılığı, fabrika taşımacılığı, depolama, nakliyat

  44. Temizlik malzemesi, temizlik malzemeleri, temizlik malzemesi satışı alımı fiyatları , temizlik malzemesi bedava

  45. Good one,
    I am making newsletter features and multi-mail clients are killing me.
    >.Good one,
    I am making newsletter features and multi-mail clients are killing me.
    >.<

  46. I’will not use a css in my mail. This is non sens !!

  47. Great list, although including Outlook 2007 would be very helpful.  I’m not sure if it was out though when the list was made…Outlook 2007 CSS support is awful, mainly it’s lack of support for position and float attributes.  Check out this article for details.

  48. Thanks for the chart! It’s very, very helpful, especially since I’ve just been figuring out what CSS tags to use simply by trial and error, creating various HTML code bits to send to multiple email clients, and the best part is that the HTML mailer program takes ten minutes to send something. LOL, fun times indeed. Sarcasm aside, I’m looking forward to the update when you include Outlook 2007.

  49. Thanks a lot for the list. I’m glad to see most of the css inline style will work. Does anyone know of a free HTML sender? I need to do some testing on all of my email accounts.

Comments for this entry are closed.

Explore the Email Gallery

@herron_bird That’s totally awesome - thank you for checking out worldview! :D ^RH

Follow us on Twitter