Sep 14, 2005

Email Servers Breaking CSS in HTML Email

We designed an HTML email for one of our clients, and noticed that the CSS broke when we checked it from home (sometimes). Luckily, we design with CSS to fail gracefully, so the email didn’t look bad. But still, we had to find out what was breaking our CSS—it was driving us crazy!

Turns out the culprit was all the "periods" in our CSS code…

Some email servers (not MailChimp’s) do weird stuff if you start a line in your HTML email with a period. We think they interpret those lines as email header information, and they actually reformat your CSS code!

For instance, code like this:

.small {font-size:10px;}

would get turned into this:

SMALL {font-size:10px;}

(note the period in front of .small was removed)

It seemed to be happening only when we checked email through a Comcast account, but we imagine any ISP could be doing this as well.

In order to prevent this from happening again, we just inserted a space at the beginning of every line in our CSS. Things worked brilliantly after that. If anyone else has had this experience, or can provide more insight, please do.

Update: Mark (our chief nerd) found this article over at Microsoft.