A Guide to CSS Support in Email
Posted by David Greiner on March 30, 2006
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.
We'll dig straight into our recommendations based on what we found, followed by the results themselves with a few more details about our findings.
Recommendations
Because of the huge variation of support across each email environment, there really isn't any one design approach that will guarantee consistency. Instead, you should take a couple of things into account.
1. The consistency demands of your client
If you have a client who understands the challenges you face and realizes that some email environments are just plain old broken (we can always dream), I recommend going for broke and following Mark Wyner's recent article on CSS design in email (we even include a free template to get you started). This allows you to code your email using moderns standards based design that degrades gracefully for these "broken" email environments.
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.
2. The potential email environment of your recipients
You'll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using.
Business to Business
If you're sending Business to Business (B2B) emails, you're definitely going to have to support Outlook and to a lesser extent Lotus Notes. In a recent survey of B2B readers, EmailLabs found that more than 75% use a version of Outlook and a further 9% use Lotus Notes. The good news is that Outlook's support for CSS is quite good, but Notes' certainly isn't. You'll need to weigh up the trade-offs yourself there.
Business to Consumer
If you're sending Business to Consumer (B2C) campaigns, then you'll definitely need to have Yahoo!, Hotmail and possibly AOL covered. Gmail's still purring under 5% total penetration, but if you're targeting early adopters then this percentage will likely be significantly higher.
Yahoo and AOL offer very respectable CSS support. Hotmail isn't too painful provided you include your <style> element in the <body> and not the <head>, while Gmail gives you no choice but to use inline styles only.
Further to these concerns, there's also the issue of image blocking and preview panes, but that's a whole other article.
Results
Down to the nitty gritty. To cover each email environment, we've split our results up into web-based, PC and Mac email software. Use the links below to jump straight to the respective findings.
- Web-based results - Gmail, Hotmail, Yahoo! and Windows Live Mail
- PC results - Outlook 2003 and Outlook Express, Lotus Notes, Thunderbird
- Mac results - Mac Mail, Entourage, Eudora
On top of this, we've also compiled all the results together in a single PDF file, which you can download below.
Web-based
Xavier covered the web-based email environments perfectly, but we decided to throw Microsoft's new Windows Live Mail into the mix to gaze into the crystal ball and see if Hotmail may have a brighter future. The biggest improvement we found being support for the <style> element in the <head> of your page.
The <style> element
The standard place for the style element is in the <head> of the document, but to ensure the styles appear in Hotmail, you can also insert them within the <body>. We tested both, just to make sure.
Web-based support for the <style> element |
||||
|---|---|---|---|---|
| Gmail | Hotmail | Yahoo! Mail | Windows Live Mail | |
<style> element in the <head> |
||||
<style> element in the <body> |
||||
The <link> element
The <link> element is used to reference a separate CSS file. Web based email environments offer no support for this element, so I recommend playing it safe and sticking with the <style> element for your CSS.
Web-based support for the <link> element |
||||
|---|---|---|---|---|
| Gmail | Hotmail | Yahoo! Mail | Windows Live Mail | |
<link> element in the <head> |
||||
<link> element in the <body> |
||||
CSS Selectors
Selectors are used to "select" specific elements on a page so that they can be styled. Besides Gmail, most web-based email environments offer pretty good selector support.
| Web-based support for CSS Selectors | ||||
|---|---|---|---|---|
| Gmail | Hotmail | Yahoo! Mail | Windows Live Mail | |
| * | ||||
| e | ||||
| e > f | ||||
| e:link | ||||
| e:active, e:hover | ||||
| e:focus | ||||
| e+f | ||||
| e[foo] | ||||
| e.className | ||||
| e#id | ||||
| e:first-line | ||||
| e:first-letter | ||||
CSS Properties
CSS property support ranges from very good (Yahoo!) down to so-so (Gmail). If you want results in Gmail, you'll need to do your styles inline (<p style="...">this is pretty now</p>) rather than via the <style> element.
| Web-based support for CSS Properties | ||||
|---|---|---|---|---|
| Gmail | Hotmail | Yahoo! Mail | Windows Live Mail | |
| background-color | ||||
| background-image | ||||
| background-position | ||||
| background-repeat | ||||
| border | ||||
| border-collapse | ||||
| border-spacing | ||||
| bottom | ||||
| caption-side | ||||
| clear | ||||
| clip | ||||
| color | ||||
| cursor | ||||
| direction | ||||
| display | ||||
| empty-cells | ||||
| filter | ||||
| float | ||||
| font-family | ||||
| font-size | ||||
| font-style | ||||
| font-variant | ||||
| font-weight | ||||
| height | ||||
| left | ||||
| letter-spacing | ||||
| line-height | ||||
| list-style-image | ||||
| list-style-position | ||||
| list-style-type | ||||
| margin | ||||
| opacity | ||||
| overflow | ||||
| padding | ||||
| position | ||||
| right | ||||
| table-layout | ||||
| text-align | ||||
| text-decoration | ||||
| text-indent | ||||
| text-transform | ||||
| top | ||||
| vertical-align | ||||
| visibility | ||||
| white-space | ||||
| width | ||||
| word-spacing | ||||
| z-index | ||||
PC
Aside from Lotus Notes, all our PC-based email clients behaved very well. All versions of Outlook, Outlook Express and AOL 9 use Internet Explorer to render their emails, so some selectors weren't supported. This also means you'll still need to allow for the range of CSS problems IE introduces. Thunderbird scored beautifully.
The <style> element
Perfect support except for Lotus Notes, which ignores the <style> element altogether.
PC support for the <style> element |
||||
|---|---|---|---|---|
| Outlook 2003/OE | AOL 9 | Lotus Notes | Thunderbird | |
<style> element in the <head> |
||||
<style> element in the <body> |
||||
The <link> element
The <link> element is very well supported on the PC, the only shortfall being that your remote CSS file will not be loaded if images are also disabled. Once images are enabled, your CSS will also load correctly.
PC support for the <link> element |
||||
|---|---|---|---|---|
| Outlook 2003/OE | AOL 9 | Lotus Notes | Thunderbird | |
<link> element in the <head> |
||||
<link> element in the <body> |
||||
CSS Selectors
Thunderbird scored highly, but because the majority use IE to render your email, selector support is limited.
| PC support for CSS Selectors | ||||
|---|---|---|---|---|
| Outlook 2003/OE | AOL 9 | Lotus Notes | Thunderbird | |
| * | ||||
| e | ||||
| e > f | ||||
| e:link | ||||
| e:active, e:hover | ||||
| e:focus | ||||
| e+f | ||||
| e[foo] | ||||
| e.className | ||||
| e#id | ||||
| e:first-line | ||||
| e:first-letter | ||||
CSS Properties
You can have a field day as long as you're not sending to Notes. It offers dismal property support that includes only very basic text manipulation.
| PC support for CSS Properties | ||||
|---|---|---|---|---|
| Outlook 2003/OE | AOL 9 | Lotus Notes | Thunderbird | |
| background-color | ||||
| background-image | ||||
| background-position | ||||
| background-repeat | ||||
| border | ||||
| border-collapse | ||||
| border-spacing | ||||
| bottom | ||||
| caption-side | ||||
| clear | ||||
| clip | ||||
| color | ||||
| cursor | ||||
| direction | ||||
| display | ||||
| empty-cells | ||||
| filter | ||||
| float | ||||
| font-family | ||||
| font-size | ||||
| font-style | ||||
| font-variant | ||||
| font-weight | ||||
| height | ||||
| left | ||||
| letter-spacing | ||||
| line-height | ||||
| list-style-image | ||||
| list-style-position | ||||
| list-style-type | ||||
| margin | ||||
| opacity | ||||
| overflow | ||||
| padding | ||||
| position | ||||
| right | ||||
| table-layout | ||||
| text-align | ||||
| text-decoration | ||||
| text-indent | ||||
| text-transform | ||||
| top | ||||
| vertical-align | ||||
| visibility | ||||
| white-space | ||||
| width | ||||
| word-spacing | ||||
| z-index | ||||
Mac
While Mac Mail and Entourage offer fantastic support across the board, I wasn't surprised to find that Eudora refused to come to the party. Basically, Eudora sucks.
The <style> element
Go for it, just ignore Eudora.
Mac support for the <style> element |
||||
|---|---|---|---|---|
| Mac Mail | Entourage | Eudora | ||
<style> element in the <head> |
||||
<style> element in the <body> |
||||
The <link> element
Same old story, no Eudora.
Mac support for the <link> element |
||||
|---|---|---|---|---|
| Mac Mail | Entourage | Eudora | ||
<link> element in the <head> |
||||
<link> element in the <body> |
||||
CSS Selectors
Mac Mail support was fantastic and Entourage was a close second.
| Mac support for CSS Selectors | ||||
|---|---|---|---|---|
| Mac Mail | Entourage | Eudora | ||
| * | ||||
| e | ||||
| e > f | ||||
| e:link | ||||
| e:active, e:hover | ||||
| e:focus | ||||
| e+f | ||||
| e[foo] | ||||
| e.className | ||||
| e#id | ||||
| e:first-line | ||||
| e:first-letter | ||||
CSS Properties
Property support was also top notch, except for Eudora, with no property support whatsoever.
| Mac support for CSS Properties | ||||
|---|---|---|---|---|
| Mac Mail | Entourage | Eudora | ||
| background-color | ||||
| background-image | ||||
| background-position | ||||
| background-repeat | ||||
| border | ||||
| border-collapse | ||||
| border-spacing | ||||
| bottom | ||||
| caption-side | ||||
| clear | ||||
| clip | ||||
| color | ||||
| cursor | ||||
| direction | ||||
| display | ||||
| empty-cells | ||||
| filter | ||||
| float | ||||
| font-family | ||||
| font-size | ||||
| font-style | ||||
| font-variant | ||||
| font-weight | ||||
| height | ||||
| left | ||||
| letter-spacing | ||||
| line-height | ||||
| list-style-image | ||||
| list-style-position | ||||
| list-style-type | ||||
| margin | ||||
| opacity | ||||
| overflow | ||||
| padding | ||||
| position | ||||
| right | ||||
| table-layout | ||||
| text-align | ||||
| text-decoration | ||||
| text-indent | ||||
| text-transform | ||||
| top | ||||
| vertical-align | ||||
| visibility | ||||
| white-space | ||||
| width | ||||
| word-spacing | ||||
| z-index | ||||
We hope you find these results helpful. Let's hope that as browsers move forward, ISP's and email client developers follow suit. It's our sanity at stake here, right?
UPDATE: After an oversight pointed out by Lachlan Hunt, we've scaled back Eudora's CSS support to nil, zilch, zero.
Jurgen
wrote on March 30, 2006 8:36 PM
Great post, it has always been sort of a grey zone with web based email clients. This makes it a bit more clear!
Jon
wrote on March 30, 2006 11:08 PM
Excellent resource! Thanks for putting the time into simplifying this for us.
Chris Harrison
wrote on March 31, 2006 12:12 AM
Thanks for sharing this David! Definitely saving this for future reference. I appreciate you putting the time into compiling all of this for everyone.
Josh Williams
wrote on March 31, 2006 1:21 AM
Excellent. This is confirmation that we are not insane. Great resource!
Terry Evans
wrote on March 31, 2006 1:37 AM
Awesome. Thank you very much!
Now I've got some real armour for heading into the HTML email battlefield. Although clearly you can't have enough.
Colly
wrote on March 31, 2006 2:12 AM
Thank you, thank you, thank you... and thank you.
Just what I need now that a certain record company are constantly badgering me to create mailouts that look like the website. Was having huge probs with web-based email, so this is bloody perfect.
Shane
wrote on March 31, 2006 8:15 PM
A fantastic resource for anyone designing CSS-based e-mails.
I've bookmarked the page, and I'm sure I'll be back. Thanks a lot for your efforts.
Asif
wrote on March 31, 2006 9:10 PM
Great work ...
Simon
wrote on April 1, 2006 1:41 AM
Excellent piece. Explains a lot of things about email I have received that didn't look correct! And may also explain some porr results on certain mails I have sent.
Amrit
wrote on April 1, 2006 7:32 PM
Nice post! Sending elegantly formatted emails is always a problem especially with people using all the email clients in the world. Thanks for sharing this.
Darren
wrote on April 2, 2006 12:23 AM
I've been looking for this type of resource for a year now. Good lookin' out!
David
wrote on April 3, 2006 1:35 PM
So if I leave out the block from the head and only place it in the body the support should be about the same if I had placed it in both areas? Only now hotmail will see it?
I just coded a css email and hotmail showed nothing. Not even a bare bones version.
I'm also going to send google a nice little letter telling them to get their act together with gmail. I use gmail and love it but it really should support css. The folks over at google are plenty smart enough to have figured it out by now.
Thanks for the nice article!
Quentin Ellis
wrote on April 4, 2006 2:09 AM
Great post, as the others say, thank you for the hard work. many questions answered
Arnold
wrote on April 4, 2006 1:10 PM
Can u post some sample program about CSS
Dave Greiner
wrote on April 4, 2006 10:52 PM
Arnold, if you're looking for a sample CSS email template, the one available in this article is a great place to start.
David, that's right, placing the <style> element in the body is the way to go and won't have any negative effects, except for Eudora, but as we illustrated that's not really a problem because of its dismal CSS support.
Marina Krutchinsky
wrote on April 5, 2006 3:25 AM
Thank you very much for combining all data into a single article. It makes an excellent reference and removes most of "test and trial" and plain old guesswork. Most helpful!
AMC
wrote on April 5, 2006 8:34 AM
As a long-time, die-hard Eudora user, I agree that anything beyond the simplest markup is totally ignored ... but keep in mind that Eudora users can choose "File > Open in Browser" to see HTML e-mails properly formatted. Don't know how many do so, but for important e-mails or ones with interesting links, I usually do.
AMC
wrote on April 5, 2006 8:44 AM
in case I wasn't totally clear ... in Eudora, looking at an opened e-mail message that's basically unreadable due to HTML markup (CSS or otherwise), the user chooses Open in Browser from the File menu. Eudora creates a temp .html file in file:///private/var/tmp/ and the message is shown is the user's default browser, mark-up renders beautifully. This is the only way I can read my e-mails from AmEx ...
Bill Burns
wrote on April 6, 2006 1:37 PM
This is fantastic, David. Thanks for putting the work into this. Instant reference bookmark...
ParadiseFound
wrote on April 13, 2006 5:24 AM
What version of Lotus Notes client was used for this test? Just interested...
Ed Brill
wrote on April 13, 2006 5:41 AM
this can't possibly be a current version of Lotus Notes. Without disclosure as to what version, this seems like an incomplete analysis.
Niki Lin
wrote on April 13, 2006 7:32 AM
Great work guys!
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...
Dave Greiner
wrote on April 13, 2006 9:53 AM
Hey Ed,
We tested the Notes compatibility on the latest version we could download from the IBM site. This was version 6.5.4, which was apparently released on March 27, 2005.
If there is a more recent version of Notes that we can have access to, I'd be more than happy to replicate the test and update our findings.
Alex
wrote on April 13, 2006 7:37 PM
That´s really great, david. Thanks for your fantastic work.
Patrick Corcoran
wrote on April 14, 2006 3:36 AM
Nice work. Well researched.
tribaldo
wrote on April 17, 2006 12:42 AM
Just say, thnx a lot! This guide is very useful for web developers. ;)
Joe
wrote on April 19, 2006 12:16 AM
Nice job on this article
Lachlan Hunt
wrote on April 19, 2006 3:51 PM
If Eudora doesn't support any properties whatsoever, how were you able to determine that it supports the type selector? How about making all of the test cases you used available so we can see the results for ourselves, including clients you haven't tested?
Lachlan Hunt
wrote on April 20, 2006 10:47 AM
With regards to putting the style element in the body instead of the head to support Hotmail, what happens if you just omit the start- and end-tags for the head and body elements? That is perfectly valid in HTML 4.01 (and earlier).
Dave Greiner
wrote on April 21, 2006 10:24 AM
Lachlan, that's a very good point and one that we overlooked. I just double checked the results and Eudora changed the font-size for a H1 we were testing and we mistakingly took that as it supporting the style we declared for that H1. Pretty silly oversight really.
Here's the test HTML and CSS we used for our testing. If you have any other suggestions, I'd love to hear them.
In regards to omiting the head tags from the document, that's something we'd have to test, I haven't tried that one before.
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().
Damien Buckley
wrote on April 22, 2006 9:19 AM
Hotmail supports background images but you'll need to put the style tag inside the body tags, not in the document head - last time I checked anyway. I still think you're better off putting your CSS in the head of the doc and letting Hotmail fall back to unstyled content - its more reliable for the minority who use it.
Ellen de Graaf
wrote on April 23, 2006 12:04 AM
I did put the style inside the body tags, but it didn't work. I totally agree with you, but clients huh ... They tell me a lot of our target audience still uses Hotmail (here in Holland), unfortunately :(
Bob Mixon
wrote on April 24, 2006 1:15 AM
Very, very nice! Great work and I appreciate it. I am linking to this page from my Site!
Enrique
wrote on April 24, 2006 3:29 AM
Genial.
loopion
wrote on April 24, 2006 7:26 AM
I think is the most useful analysis I've ever seen !
Thanks a lot !
Spencer
wrote on April 26, 2006 11:44 AM
Wow, absolutly perfect info. I deal with HTML/Text (Multi) email on adaily basis. This is oging in my Links bar right now!
RickRanger
wrote on April 29, 2006 4:36 AM
An outstanding research effort! The depth and detail of your findings is exceptional.
Well done.
Lachlan Hunt
wrote on May 1, 2006 2:27 PM
I noticed with a recent HTML mail I was forced to build (despite my desire to send only plain text e-mails) that Thunderbird will only render in quirks mode, regardless of the DOCTYPE used. So my beautiful, standards compliant work of art that renders beautifully in Firefox, has bugs in Thunderbird as a direct result of quirks mode.
Donna Zukowski
wrote on May 3, 2006 5:52 AM
I have a question about meta tags. I read somewhere that email programs ignore them. Should they be included? thanks
Donna Zukowski
wrote on May 3, 2006 7:45 AM
I'm also wondering is there anyway to keep on top of HTML specifications to lessen the amount of HTML winding up in SPAM?
Ben Richardson
wrote on May 3, 2006 10:32 PM
Hey Donna, that's correct, email clients don't care about meta tags. As for your HTML code affecting your SPAM scoring, content is usually the offender as opposed to code - here's a little more information on this.
Gunther Bohnert
wrote on May 8, 2006 5:53 PM
Great work - thanks a lot. I'd like to mention one more Mac Client: PowerMail by CTM Development. Haven't checked your test parameters with this one yet. Maybe I should...
Jon Harvey
wrote on May 10, 2006 1:16 AM
If you comment each line of style within the body tag Lotus Notes will render them... Weird but true... Just thought I'd add this little pearl
Mark Wyner
wrote on May 10, 2006 1:42 AM
Beatiful work, folks. You put in some serious time to arrive at these charts and the web community is therefore indebted to you. We applaud your efforts.
Amber S.
wrote on May 10, 2006 5:22 AM
Finally - one place to go to for CSS & email info. When I created my company's newsletter using CSS a year ago, you don't know how many articles, blogs, and other sites I read trying to find out what was supported (along w/ a million test emails sent to my Hotmail, Gmail, and Outlook accounts)! Thanks so much for doing all this testing!
Danny Foo
wrote on May 10, 2006 12:31 PM
The charts definetely going to help when trying to figure out why certain properties aren't working.
A very big thank you. :)
Blaze
wrote on May 10, 2006 10:32 PM
This is incredibly useful, thankyou very much. Maybe in the future you can update this with more popular clients etc as well? Cheers
just debra
wrote on May 19, 2006 3:58 PM
Double-Kudos to you! Thanks for such a great work.
alakazarm
wrote on June 3, 2006 1:10 AM
You should have added Thunderbird to the mac tests too...
Tek Boy
wrote on June 3, 2006 3:08 AM
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
wrote on June 9, 2006 8:46 AM
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
wrote on June 16, 2006 5:51 AM
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
wrote on June 23, 2006 11:23 PM
I *love* you guys! :)
Thanks for the extensive and invaluable work!
Kudos
RARPSL
wrote on July 4, 2006 6:45 AM
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
wrote on July 12, 2006 10:39 AM
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
wrote on August 5, 2006 1:37 AM
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
wrote on August 10, 2006 8:16 AM
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
wrote on August 11, 2006 8:40 AM
Thanks for all !!!!!!!!!!! It's a very good guide.
Donovan
wrote on August 22, 2006 6:06 PM
Thanks for the info, i'm glad I finally found something usefull thx again!
Donovan
Gary
wrote on August 24, 2006 2:30 AM
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
wrote on August 24, 2006 5:46 AM
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
wrote on August 24, 2006 12:12 PM
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
wrote on August 31, 2006 2:36 AM
Good lord, what a fantastic time saver. Thank you for the excellent, hard and detailed work - and particularly for sharing it!
Rio
wrote on September 7, 2006 5:25 AM
Seriously, that was sooo helpful! Thanks a milion!
-Mario
Virdee
wrote on September 15, 2006 10:53 PM
Excellent work - this will save weeks worth of testing!!!
Adriŕ García
wrote on September 20, 2006 6:06 PM
Excelent report!
Thanks dude.
Alex Dedul
wrote on September 27, 2006 12:58 AM
Good report. Thanks, thats saved a lot of work.
Luiz Júnior Fernandes
wrote on September 29, 2006 6:07 AM
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
wrote on October 3, 2006 9:13 PM
Nice job! A lot of thanx!
carlos
wrote on October 4, 2006 9:01 PM
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
wrote on October 9, 2006 9:50 PM
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
wrote on October 14, 2006 4:58 AM
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
wrote on October 25, 2006 12:51 AM
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
wrote on October 25, 2006 4:55 PM
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
wrote on October 31, 2006 2:15 AM
Excellent work! Thank you!
Qaiser Mehmood Mughal
wrote on December 5, 2006 12:04 AM
Excelent Research.
Thanks for posting such kind of information.
Qaiser Mehmood Mughal
----------------------------
Software Engineer
Lahore - Pakistan.
John
wrote on December 13, 2006 8:45 PM
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
wrote on December 14, 2006 11:59 AM
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
wrote on December 19, 2006 10:56 AM
We tested the Notes compatibility on the latest version we could download from the ..
Chris
wrote on December 20, 2006 3:48 AM
Sweet! I found this very useful. Thank you! :)
Asam
wrote on January 3, 2007 11:18 PM
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
wrote on January 19, 2007 9:51 AM
Great article I've ever seen on web, you da man
Jeet
wrote on January 23, 2007 1:31 PM
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
wrote on January 23, 2007 3:06 PM
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
wrote on February 8, 2007 5:43 AM
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
wrote on March 17, 2007 3:01 AM
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
wrote on March 27, 2007 9:43 PM
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
wrote on March 30, 2007 7:34 AM
It's possible things have changed in the year since this post. Gmail is rendering font-family just fine now.
Dave Greiner
wrote on March 30, 2007 10:13 AM
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
wrote on April 2, 2007 7:38 AM
I would love to see this list updated with the new changes to Outlook 2007.
Bear
wrote on April 17, 2007 6:51 AM
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
wrote on April 25, 2007 1:51 AM
Hello,
Thenk you for this informations... :-)
steve
wrote on April 25, 2007 2:17 AM
great article, very helpful
Gabriel McCay
wrote on April 27, 2007 2:57 AM
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
wrote on May 1, 2007 2:33 PM
Thanks!
This is also a great guide to CSS in blog post.
Chris Hooven
wrote on May 3, 2007 9:30 AM
Anyone have any experiance sending HTML Mail to rediff mail accounts? About 6 months ago all our images stopped working there.
Kiran
wrote on May 3, 2007 8:41 PM
Very, very nice! Great work and I appreciate it.
Skeller
wrote on June 1, 2007 3:31 AM
"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
wrote on June 17, 2007 5:08 AM
Thanks for the information. It is an useful article for me ;)
Apteka internetowa
wrote on July 5, 2007 9:44 AM
It's very good article. Great site with very good look and perfect information... Thanks
Stock photos
wrote on July 13, 2007 11:12 PM
Good stuff. I want to install it on my phone!
I love this phone i might buy me one in fort lauderdale
Aukcje
wrote on July 15, 2007 8:51 PM
It’s very good article. Great site with very good look and perfect information. I like it too
Wzorki
wrote on July 16, 2007 8:35 AM
Very nice and well written guide. It's very helpful to me, Thanks
Emlak
wrote on July 23, 2007 12:33 PM
Nice job! A lot of thanks
Condor Fluge
wrote on July 23, 2007 9:14 PM
CSS is also heplfull in protecting your e-mail address from spam. You can for example make him written from right to left and change his verwing in CSS. Not 100% but always it is some wall to spiders.
Vignesh
wrote on July 26, 2007 11:25 PM
Hi! the article was very useful for our project. Great! Guys you have done a wonderful study.
Nithiyanandhan
wrote on August 7, 2007 10:01 PM
Hey buddy's
I am facing one problem.My html formatted e-mail is displaying properly in outlook express.But if i fwd that html formatted mail to some others the html format is collapsed and go to ordinary mail not a formatted mail.past 10 days i am facing this problem.So anybody could you help me.Urgent
indir
wrote on August 7, 2007 11:26 PM
Thank you for the excellent, hard and detailed work - and particularly for sharing it!
Tomasz Gorski
wrote on August 13, 2007 12:47 AM
Excellent. This is confirmation that we are not insane. Great resource!
Gry
wrote on September 7, 2007 4:40 AM
Excellent piece. Explains a lot of things about email I have received that didn't look correct! And may also explain some porr results on certain mails I have sent.
dzieci
wrote on September 8, 2007 12:59 AM
I don't use css in emails because then they are more larger.
NBA
wrote on September 17, 2007 2:07 PM
Excellent resource! Thanks for putting the time into simplifying this for us.
Katalog Stron
wrote on September 19, 2007 1:19 AM
E_X_C_E_L_L_E_N_T_-_A_R_T_I_C_L_E, thanks (*_*)
Dj Tiesto
wrote on September 19, 2007 10:54 AM
Allright..., now I only hope that somebody can tell me the HTML tags that PC E-mail clients can support in HTML e-mails.
gdr
wrote on September 19, 2007 8:28 PM
Thanks for this useful post !
Linki
wrote on September 20, 2007 1:40 AM
Very nice and well written guide. It's very helpful to me, Thanks
agire jiyan
wrote on September 22, 2007 9:02 PM
Great site with very good look and perfect information.It's very good article. Thanks
Katalog Stron
wrote on September 26, 2007 1:32 AM
Thanks for the info, i'm glad I finally found something usefull thx again!
Website
wrote on September 27, 2007 12:43 AM
Thank, this article is useful for me.
data
wrote on September 27, 2007 2:20 PM
Great resource! Excellent. This is confirmation that we are not insane.
Viktor
wrote on September 28, 2007 4:22 AM
Thanks a lot, CSS is quite a pain in the a....
Michael
wrote on September 30, 2007 12:33 AM
Very nice and well written guide. It's very helpful to me, Thanks
Evden Eve Nakliyat
wrote on October 5, 2007 1:02 AM
Michael - "Very nice and well written guide. It's very helpful to me, Thanks"
Good job.
Tapeten
wrote on October 6, 2007 11:50 PM
I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lot…
sohbet
wrote on October 9, 2007 3:07 PM
Very nice and well written guide
bentodesign
wrote on October 11, 2007 7:58 AM
interesting that google remains the least friendly web based email when it comes to using css.
Hanson So
wrote on October 12, 2007 3:28 AM
This is very helpful, and I find it an excellent resource. Thanks.
ross
wrote on October 13, 2007 10:28 AM
Thanks for taking the time to demystify the email minefield. Maybe someday we can stop pretending its 1990 when writing HTML emails.
diyet programları
wrote on October 14, 2007 5:04 PM
Thats really great, david. Thanks for your fantastic work.
Gdynia
wrote on October 16, 2007 6:38 AM
Thanks for this very good article. Can i translate this and insert on my site in Poland? Thanks and Greetings from Gdynia
Pathfinder
wrote on October 17, 2007 7:02 PM
Thanks for stuff.I was looking at the material over a large amount of time
pozycjonowanie
wrote on October 18, 2007 10:18 PM
Good lord, what a fantastic time saver. Thank you for the excellent, hard and detailed work - and particularly for sharing it!
kanutouren
wrote on October 25, 2007 5:59 AM
This is very help ful , very nice and well written guide! Thanks! Good job. Thanks! Thanks!
resimler
wrote on October 29, 2007 4:54 PM
Can u post some sample program about CSS
kora
wrote on October 30, 2007 7:06 AM
You'll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using.
Ana
wrote on October 31, 2007 4:15 AM
Very helpful!
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.
There are numerous others that I am not mentioning since I'm not done testing. :(
Colin Guthrie
wrote on November 1, 2007 10:27 AM
Hello,
Great report, very handy. One thing it does not mention however is what email clients support the embedding of multipart/related images in CSS url() containers. AFAIK none of the clients support this, but finding this information out is quite hard so adding this into this report would make it definitive!
Col
borelioza
wrote on November 3, 2007 3:00 AM
Thank you for the excellent, hard and detailed work - and particularly for sharing it! Good lord, what a fantastic time saver.
Stefan
wrote on November 3, 2007 8:21 PM
Good review. I tried to design to another web email..and someones has no treatment of css...i design with older html without css
Informatico
wrote on November 5, 2007 6:40 AM
Great work, i was go crazy to make a template compatible with all clients and webmails.
Thanks a lot.
klimatyzatory
wrote on November 7, 2007 10:30 AM
This is very helpful.
nezh
wrote on November 8, 2007 3:23 AM
Good review. Thanks
nezh
wrote on November 8, 2007 3:24 AM
Nice post! Sending elegantly formatted emails is always a problem especially with people using all the email clients in the world.
John Handy
wrote on November 8, 2007 5:12 AM
I don´t think that using css in e-mails is a good idea. many people i know (including me) have activated text-only for e-mail and for that is css pretty useless but anyway a good article.
.Ogłoszenia
wrote on November 8, 2007 7:20 AM
Thanks for this side, now I know more. I'll try to translate this article to my language and add it on my webside.Ogłoszenia
Firma
wrote on November 9, 2007 6:03 AM
Thank you for the excellent, hard and detailed work - and particularly for sharing it! Good lord, what a fantastic time saver.
game
wrote on No