Blog

A Guide to CSS Support in Email

March 30, 2006

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: Tips & Resources

199 Comments

Tek Boy
June 3, 2006 3:08am

Excellent work, guys—this really is an invaluable resource.

After going over the list, I’ve decided against supporting Gmail, Lotus Notes and Eudora—they don’t support enough of the CSS spec to justify the effort. Excluding those clients, I think you’ll be able to achieve maximum compatibility across most of the major clients if you avoid supporting any of these CSS features covered in the article:

      The <style> element
            • <style> element in the <head>

      The <link> element
            • <link> element in the <head>
            • <link> element in the <body>

      CSS Selectors
            • e > f
            • e:focus
            • e+f
            • e[foo]
            • background-position
            • border-spacing
            • caption-side
            • empty-cells
            • filter
            • list-style-position
            • opacity
            • position
            • white-space
turd furgeson
June 9, 2006 8:46am

you must be the most bored person on the planet. also, any production designer worth their salt has this shit memorized. get a real job.
Bertrand
June 16, 2006 5:51am

To sum these good tables up, here is a list of the things who should restrain to to be compatible with:

Hotmail
Yahoo! Mail
Windows Live Mail

PC
Outlook 2003/OE
AOL 9
Thunderbird

Mac
Mac Mail
Entourage

(Forget GMail, Lotus Notes and Eudora)

Here’s the list:

CSS selectors

« style » element in the « body »
* e
e:link
e:active, e:hover
e.className
e#id
e:first-line
e:first-letter

CSS Properties

background-color
border
clear
color
display
float
font-family
font-size
font-style
font-variant
font-weight
height
letter-spacing
line-height
padding
table-layout
text-align
text-decoration
text-indent
text-transform
vertical-align
visibility
width
word-spacing

Thanks for the article!
Chris
June 23, 2006 11:23pm

I *love* you guys! :)
Thanks for the extensive and invaluable work!
Kudos
RARPSL
July 4, 2006 6:45am

I note that while you list Eudora for the Macintosh (which has poor internal HTML support and relies on “View in Browser” to do the heavy HTML rendering - to be fixed in forthcoming MacEudora 7.x whose native HTML rendering will use the MacOS X supplied Web Rendering engine) you ignore Windows Eudora which should score like IE since it uses the IE Rendering Engine for its Native Support (as well as, if requested in its settings, handing the HTML off to IE which launches and shows it in its own window [similar to what occurs on the Macintosh if you “View in Browser”]).
Cait
July 12, 2006 10:39am

I’ve noticed that you said that Yahoo doesn’t support background-position; however, when I do background: url(image.gif) no-repeat bottom left; Yahoo seems to respect that. But if you break it down into background, background-repeat and background-position, then no Yahoo will not respect the background-position call.

Would love to know if others can duplicate this.
Steven Tew
August 5, 2006 1:37am

What a great break down. Thanks for this?
Would love to this expanded to cover position: relative and position : absolute. It could maybe be used to get around the lack of support for background-images.
Steve
August 10, 2006 8:16am

I have an HTML mail merge email going out with an invoice section i’d like printed on its own page. I can’t successfully force a page break before/after a section for a printed email. ‘page-break-after’ / ‘page-break-before’ don’t seem to register when printed through email though they work nicely printed from the web =
Matt
August 11, 2006 8:41am

Thanks for all !!!!!!!!!!! It’s a very good guide.
Donovan
August 22, 2006 6:06pm

Thanks for the info, i’m glad I finally found something usefull thx again!

Donovan
Gary
August 24, 2006 2:31am

Created our first XHTML/CSS based email, and all went well… Google stripped everything out, but it degraded well.

Outlook etc all fine too, though had to click the “Click here to download pictures” to get the backgrounds etc to all load up….

HOWVER - Hotmail (or livemail which it is now) - displayed it a bit like outlook (without the backgrounds etc), but at a tiny scale… I assume there’s some sort of font-size inline css going on, and my font with font-size: 0.6em is becomming even smaller….

Any ideas?

Thanks
Gary
Gary
August 24, 2006 5:46am

to confirm - it’s definately my:

body {font-size: 0.6em;}

Thats causing the issue… If i change it to a fixed 10px it’s fine. Shame the text cannot then be resized…

It looks like LiveMail already includes a body font size (at 0.69em), so all sizes (in .em) are taken from this… Shame… looks like i’ll have to break accessibility guidelines and hard-code the text size to a specific pixel size.
Doug L
August 24, 2006 12:12pm

Is anyone dealing with an issue whereby Word is set as the editor in Outlook 2003 of the recipients? The reason I ask is that I am having challenges when recipients forward my newsletter.

I hand design using HTML/CSS, then load in the Stationery folder to send through Outlook. That part works brilliantly. I don’t use Word as my editor in Outlook. It’s when my recipients Word 2003 inserts enough MS specific XHTML/CSS that my layouts get distorted.

Bottom, line design integrity is compromised when forwarded. I don’t know enough about MS CSS to understand how to design for it, outside using Word or Publisher as my source editor. Want to avoid that, but will compromise because my audience is strictly Outlook/Office 2003.

Any advice or URLs to learn from will be most appreciated. Doug
Ed Purkiss
August 31, 2006 2:36am

Good lord, what a fantastic time saver. Thank you for the excellent, hard and detailed work - and particularly for sharing it!
Rio
September 7, 2006 5:25am

Seriously, that was sooo helpful! Thanks a milion!

-Mario
Virdee
September 15, 2006 10:53pm

Excellent work - this will save weeks worth of testing!!!
Adri‡ GarcÌa
September 20, 2006 6:06pm

Excelent report!
Thanks dude.
Alex Dedul
September 27, 2006 12:58am

Good report. Thanks, thats saved a lot of work.
Luiz J˙nior Fernandes
September 29, 2006 6:08am

Allright…, now I only hope that somebody can tell me the HTML tags that PC E-mail clients can support in HTML e-mails. Anyone?!
Antony
October 3, 2006 9:13pm

Nice job! A lot of thanx!
carlos
October 4, 2006 9:02pm

Good review. I tried to design to another web email..and someones has no treatment of css…i design with older html without css
Scott Gingrich
October 9, 2006 9:50pm

A very handy post…thanks! I’m taking my first plunge into HTML Email tomorrow. I’ll be using 1ShoppingCart to send out a multi-part/mime message. Have you done any testing on HTML only Emails vs multi-part/mime?
Tom
October 14, 2006 4:58am

On the other hand if your client demands consistency no matter what, or the CEO’s using Lotus Notes, you’ll have to dull down your design, stick with tables for layout and use only basic text formatting via CSS. You may even have to go down the inline CSS route.

—————————————————————————

I disagree with the “dull down” part of this, I would love to use CSS on a daily basis but our clients want consitency and they don’t care what the HTML looks like. Web Design is not solely dependent on what particular mark-up you use.

A table is a designers dream as it resembles a grid, there are tonnes of problems with the CSS model even for web pages, for example vertical positioning is virtually impossible. When I have to vertical position a form or survey for a landing page from an email, the fastest most efficent method is to use a table.

Table based layout with CSS text styling is still the best way to go for email design, I wish the CSS support was better, but it’s not at a level where you could run a successful email production team on it.
alain williams
October 25, 2006 12:51am

Errr, you don’t get it—HTML email is a bad idea in the first place. Bloated, has security issues and many mail readers or organisation just won’t take it.

A couple of blog entries that explain why in a bit more detail:
http://blog.dave.org.uk/archives/000873.html
http://blog.dave.org.uk/archives/000682.html
If your marketing people insist on it, DO make sure that you send out a plain text attachment with the text in it.
Shahar Hesse
October 25, 2006 4:55pm

Some readers override link styles, to get around this, add a style=”” inside the a tag…

Also, on older tests I did (almost a year old now…) float and clear had minimal support, for lists with recipients on older os’s this might be an issue.

thanks!!
Alexander S. Manenko
October 31, 2006 2:16am

Excellent work! Thank you!
Qaiser Mehmood Mughal
December 5, 2006 12:05am

Excelent Research.
Thanks for posting such kind of information.

Qaiser Mehmood Mughal
——————————————
Software Engineer
Lahore - Pakistan.
John
December 13, 2006 8:45pm

Good review. I tried to design to another web email..and someones has no treatment of css…i design with older html without css
Keith
December 14, 2006 11:59am

Great review… really useful tables.

Upon poking around a bit, it seems gmail’s support actually changes some depending on what the element in you’re trying to define. For example, it maintains background-color of DIVs, but not of Headers, and it allows font settings in DIVs and Headers, but not in Paragraphs.

I guess the rule of thumb is, if you really need something, test it out a few different ways, and then lean on degredation.
NiC
December 19, 2006 10:56am

We tested the Notes compatibility on the latest version we could download from the ..
Chris
December 20, 2006 3:48am

Sweet! I found this very useful. Thank you! :)
Asam
January 3, 2007 11:18pm

It the best site i have seen on CSS Support in Email. I’ll definatly save it in my bookmarks.
Thank David Greiner thumb up for you
Shobi
January 19, 2007 9:51am

Great article I’ve ever seen on web, you da man
Jeet
January 23, 2007 1:31pm

Great article!

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.
Dave Greiner
January 23, 2007 3:06pm

Jeet, we’ll be publishing a full review of how the new Yahoo! Mail handles CSS in email (which is very well by the way) in the next few days.
Paul Mycroft
February 8, 2007 5:44am

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.

Is this a deliberate move from Campaign Monitor to accommodate Outlook 2007? Which option should I take?

Thanks!
Dan Merfeld
March 17, 2007 3:01am

Thank you so much for putting this together. I have been flying blind on most of these email clients, crossing my fingers that everything looked okay. Having this information is invaluable.

As far as the CSS verses Tables debate, it’s nice to see we have a new realm in which to argue.
Mimidou
March 27, 2007 9:43pm

Hello,

Thanks for this page.

Now OUTLOOK 2007 is here
Here another case studied :)

Just for information the Background image does not go under Outlook 2007
Wayne Pelletier
March 30, 2007 7:34am

It’s possible things have changed in the year since this post. Gmail is rendering font-family just fine now.
Dave Greiner
March 30, 2007 10:13am

Cheers Wayne, we plan on doing a major re-test and include lots of the newer email clients like Outlook 2007 and the new Yahoo beta real soon. Watch this space.
Chris
April 2, 2007 7:38am

I would love to see this list updated with the new changes to Outlook 2007.
Bear
April 17, 2007 6:51am

Any idea when you’ll be updating this for Outlook 2007? This is such a great reference, I just can find anything like this for the mess that Outlook 2007 is now causing. Thanks!
Andre
April 25, 2007 1:51am

Hello,

Thenk you for this informations… :-)
steve
April 25, 2007 2:17am

great article, very helpful
Gabriel McCay
April 27, 2007 2:57am

Oh my god, I just finished up an HTML Email that took me about an hour to build, and 6 hours of browser / web-browser mail. I wish i had found this resource a couple days ago, From now on I will plan my approach.
rye
May 1, 2007 2:33pm

Thanks!

This is also a great guide to CSS in blog post.
Chris Hooven
May 3, 2007 9:30am

Anyone have any experiance sending HTML Mail to rediff mail accounts? About 6 months ago all our images stopped working there.
Kiran
May 3, 2007 8:41pm

Very, very nice! Great work and I appreciate it.
Skeller
June 1, 2007 3:31am

“Ellen de Graaf

wrote on April 21, 2006 7:31 PM

You indicate that Hotmail supports background-images, but it doesn’t unfortunately :(
I noticed Hotmail removes any CSS rule that uses a url”

I found the same thing…
Leo
June 17, 2007 5:08am

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

< 1 2 3 4 >

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

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

Create a free account

Sign up, kick the tires and start sending in less than 60 seconds.
Powerful API

Interact and “sync” with your account via simple web-based methods.
Single-click testing

See screenshots of your email in 20+ email clients and check against spam filters.