CSS and e-mail clients: compatibility issues

In several email clients (e.g. Microsoft Outlook, Lotus Notes, etc.) Cascading Style Sheets are not interpreted as they are by a Web browser. Therefore, they cannot be used as they would be in a Web page.

Specifically, there are certain style definitions that are not supported, and - more importantly - only inline styles are taken into account. All other CSS (e.g. styles defined at the top of the page or in an outside *.css file) are ignored by many email clients, including a popular system like Gmail.

Ironically, best practices for designing Web pages must be ignored when creating an HTML email message. For example, HTML tables must be used for the layout of the email, and deprecated HTML tags (e.g. "hspace","vspace", "align", etc.) are actually the ones that provide the best results.

Useful resources:

• For more details on how Web standards are supported in different email clients, we recommend referring to the Email Standards Project Web site located at: http://www.email-standards.org/clients/
• MS Outlook uses MS Word (and not a browser such as Internet Explorer) as the rendering engine (this applies to both Outlook 2010 and Outlook 2007). See what this means.
• For details on the HTML and CSS rendering capabilities in MS Outlook 2007, please see http://msdn.microsoft.com/en-us/library/aa338201 and http://msdn.microsoft.com/en-us/library/bb226714. The same applies to MS Outlook 2010.

In addition to limited support for cascading style sheets, please note that there are other elements that are often not supported, but are commonly used in Web pages. These include:

• HTML Forms
• Background images
• ActiveX components
• Adobe Flash animations
• Animated GIFs
• JavaScript