Optimizing CSS presentation in HTML emails


Posted by Mark Wyner on August 01, 2005

This article is a sequel to one that appeared on A List Apart shortly after the CAN-SPAM Act of 2003 was enacted. (If you haven’t read it, you might want to take a gander.) The web has made great strides in standards-coding techniques, and my philosophies have evolved accordingly. I now would like to clarify the intentions of my original article and explain how my approach to HTML emails has kept pace with the rapidly changing internet environment.

Yahoo Mail alters the contents of an HTML email by changing things like ‹body› to ‹xbody› and adding an all-encompassing container DIV (#message) just inside the Body tag. The “xbody” issue disables all presentational aspects you’ve defined for the body of your document. There is, however, an accessible solution to this problem that minimizes gratuitous markup. Create your own container DIV that envelops your entire email and treat it as though it where the body tag. As for the new #message DIV, it’s relatively harmless (at least in my tests) since Yahoo is considerate enough to add #message to any descendant selectors you might have applied…….read on