This is the ugly email I kept getting before i fixed the problem

I just spent a few hours trying to fix a problem where my styles were being broken in emails I sent via Code Igniter for PHP. Now i’m gonna spend another 15 minutes writing about it to hopefully help fellow googlers. Here’s my situation:

I am generating an html email in codeigniter by loading a view, returning the data by setting the third parameter to TRUE, and then setting that to the body of the email and then sending it with CI’s Email library. This all worked fine except that none of my styles were being applied when I viewed the email in gmail. I looked at the source and noticed that everywhere i had class=”someClass” in my HTML, it was being replaced with class=3D”someClass”. That’s weird, I thought. In my eternal knowledge I immediately thought, these 3D things are fucking up my email. To confirm this, I copied the email source, saved it as an html document, and then viewed it in a browser. Yup, the styles were jacked up because of those 3Ds. I removed them and then my html looked like I wanted.

The next step was to figure out how to get rid of these blasted 3Ds which were messing up my beloved styles. I googled a bunch and found lots of people with the same problem. Everyone recommended modifying the CI Email config file in different ways as well as an assortment of other things. I tried these things for hours. It felt like years. Nothing was changing. Finally I stumbled upon this article about style support in email clients.

Ahhh, Finally my Unit Test Errors in a more readable form.

Could it be? I quickly opened up a few nicely styled emails I regularly receive and looked at their source. Yup, all of the styles were inline. I was wrong. Completely, terribly, ignorantly wrong. If you googled for this article you probably are too. My problem had nothing to do with these 3Ds and other weird characters which were being inserted into the emails. My problem was just that I was using classes and an in-document style sheet which was not supported by gmail. I moved all my styles to the style tag on the elements, sent an email, and it looked just how I wanted it.

The lame thing is that I knew this. I researched style support in emails like 18 months ago when i was tasked with sending nicely styled emails. I had just forgotten that even in mid summer of 2011, a technology company like google who is pushing for quick adoption of html 5 doesn’t support style sheets in their html emails. Lame. Anyways, hope this helps you.