HTML email in Gmail - CSS style attribute removed

gmail html-email mailchimp
Matty B picture Matty B · Jul 11, 2013 · Viewed 34.6k times · Source

I'm working on an HTML email and I am using MailChimp's Responsive Email Templates in combination with their CSS inliner tool. For the most part, the email looks great across the myriad of email clients, but in Gmail things are horribly misrepresented.

If I use Gmail's "Show original" option from the drop down menu next to the reply arrow, the original HTML is different from what is actually displayed in the email client. I can confirm this by inspecting the element with the developer tools. This happens on desktop and mobile; the email client is removing inline style attributes from elements.

It seems that one of the criteria for removing the style attribute is if the element also contains a class. Can anyone confirm this? Also, it appears to remove all style attributes from a table tag regardless. Can anyone confirm this as well?

What are the workarounds for this?

Screenshots of email with source in Gmail and Yahoo included below.

Screenshot of email in Gmail with source displayed via Chrome developer tools

enter image description here

Screenshot of email in Yahoo with source displayed via Chrome developer tools

enter image description here

Answer

Matt Whitehead picture Matt Whitehead · Jul 12, 2013

As someone who regularly codes emails for marketing campaigns at my job, I feel your pain. Gmail, along with many other email clients, can be a bit funky to code for. For one, it strips out any CSS that's outside the body. So putting in things like media queries and document level styles don't work. The best piece of advice I can give you is hand code your inline CSS and try to avoid anything fancy. In fact, if you can use an HTML attribute to do your styling, use that in place of any CSS. An example would be bgcolor instead of background-color.

Here is an article related to your specific problem I found. Best of luck.

Related questions

Styling HTML email for Gmail

I'm generating a html email that uses an internal stylesheet, i.e. <!doctype html> <html> <head> <style type="text/css"> h2.foo {color: red} </style> </head> <body&…

Read More
How to get rid of "Show trimmed content" in GMail HTML emails?

I send a lot of HTML emails. The problem with GMail is, if there are more than one emails with the same subject, it hides some similar content and shows a "..." to show the "trimmed content". This screws up with …

Read More
HTML Emails: fallback for mso conditional?

If you're like me, your eye will be twitching by the end of reading this. I don't blame you. Our client has requested us to develop a responsive HTML email template, with two specifications: Using as few images as possible …

Read More