HTML email in Gmail - CSS style attribute removed

Question

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

I face the same issue as you 10 year later. When users reply to the email, the original content is mutated. Please share with me how did you fix this? — UMR
– UMR, Commented Sep 15, 2023 at 9:52

Matt Whitehead · Accepted Answer · 2013-07-12 02:56:13Z

38

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.

answered Jul 12, 2013 at 2:56

Matt Whitehead

1,8213 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matty B Over a year ago

Thought I would share this responsive template that has been outstanding for my use. It works in nearly every email client, including desktop versions of Outlook (which Zurb does not support). Hope it helps someone else emailonacid.com/blog/details/C13/…

Eoin Over a year ago

When I tested it it didn't work on all clients. They had a problem with tables dropping down, hopefully they fixed it.

pastorello · Accepted Answer · 2016-06-27 15:21:50Z

33

I just checked now: Gmail strips out your inline style attribute if you don't put spaces between ; , , and : chars

this works fine:

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

but the same rule will be stripped out if you don't use spaces; if you write this:

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

you will get this output on Gmail client:

<span>text</span>

EDIT:

In addition to this behavior, I noticed that Gmail tends to strip out the inline style if you declare a font-family inside a nested <table> or a <td>, I'm still not sure on what is the general rule of its preprocessor, I checked on Google but I can't find any official documentation about html mail composition for Gmail.

edited Jun 27, 2016 at 15:21

answered Jun 26, 2016 at 17:36

pastorello

1,03211 silver badges24 bronze badges

6 Comments

Matt Lacey Over a year ago

I made some changes based on this and I still can't believe this solves it. How did the internet get so badly broken :(

Dat TT Over a year ago

@MattLacey this is NOT correct. Gmail stripes style due to its invalid.

James Over a year ago

Yeah, what @DatTT said. Run your email through an HTML/CSS validation tool. There's often some syntax error that Gmail doesn't like, even though the email renders fine in a normal web browser.

Dushan Over a year ago

In my case the issue was "font-family inside a nested <table> or a <td>". Thanks man

Liyali Over a year ago

Same here, font-family was the issue but I had to strip out box-shadow as well for the style to not be removed

|

R Lacorne · Accepted Answer · 2013-07-31 18:24:12Z

There are multiple work arounds for gmail. Gmail is quite a joker when it comes to your styling, as it'll strip what it doesn't like completely out of your e-mail.

Here are some little tips:

Gmail adds white space between images, or stretched the size of it's container td: You can correct this by specifying style="display:block" on your images (Make sure your TD has the same width and/or height as your image).

Gmail renders black links as blue links: Yes, this is ugly. Use #000001 instead of #000000.

Gmail makes phone numbers clickable: That may be a good thing or not, depending on your client, but one way to work around that is to include an empty anchor tag with styles around the phone number.

Ex: <a style="color:#000001; text-decoration:none;>555 555-5555</a>. It will make you feel ashamed of your code, but it's an effective little hack.

sallf · Accepted Answer · 2020-08-21 17:53:20Z

4

Check your CSS for typos

The reason that Gmail strips certain styles might have changed since the OP in 2011, but here's what I discovered in 2020...

In a <style> block in the <head> of my email I had a typo that was essentially (note the "d"):

.link {
  text-decoration: underline;d
}

Inspecting the email, I could see that the rule was there (along with everything else) in the <style> block. However, every place I had used that class in the email had been stripped out by Gmail. So <p class="link"> ... </p> magically became <p> ... </p>.

In addition, all rules declared under .link { ... } were also stripped from the HTML document. So - in the example below - class="small" would work, but class="link" and class="headline" would be stripped from the HTML.

<style>
  .small {
    font-size: 12px;
  }
  .link {
    text-decoration: underline;d
  }
  .headline {
    font-size: 18px;
  }
</style>

answered Aug 21, 2020 at 17:53

sallf

2,9083 gold badges21 silver badges26 bronze badges

1 Comment

James Over a year ago

Gmail will also do this for inline styles! It'll just remove the whole style attribute from the tag. For example, if you've got a stray !important hanging out at the end like this, <a href="https://example.com" style="padding 20px; !important;">, your link won't have any padding.

You Old Fool · Accepted Answer · 2015-11-30 08:43:08Z

Just thought I'd add this in to the mix. I encountered as this problem as well and when looking at the raw source I realized that the 8-bit encoding was splitting lines in odd places due to the 1000 character limit, so I was ending up with content like this:

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">

Solution is to base64 encode the content and use chunk split or whatever tools you have to accomplish the same.

In php I did $html = chunk_split(base64_encode($html)) and then set Content-Transfer-Encoding: base64. Now gmail loves me.

Serhii Cho · Accepted Answer · 2022-08-17 07:49:31Z

2

I had the same problem for some elements in my email message. You need to remove all box-shadow from your CSS. Gmail doesn't like it for some reason.

answered Aug 17, 2022 at 7:49

Serhii Cho

211 silver badge3 bronze badges

1 Comment

Davideas Over a year ago

Yes, this was my case. In fact is a combination of all these suggestions. Doh!

ScottyG · Accepted Answer · 2013-12-19 16:28:21Z

1

Using CSS selectors is another workaround that I was able to use. In my example I am trying to format a HTML table. I found gmail stripped out all the ID and CLASS attributes rendering my CSS useless.

After some investigation I noticed gmail did not remove my title attribute. So I created a CSS rule using a title selector. This appeares to work fine:

[title~=myTitle] {background: black; color: white;}

I don't think this is best practice, but I thought I would mention it.

answered Dec 19, 2013 at 16:28

ScottyG

3,4503 gold badges35 silver badges44 bronze badges

4 Comments

ltjfansite Over a year ago

Cant get this to work. I also tried it with the Lang attribute as the title attribute displays a little tooltip. Gmail seems to remove [title~=myTitle] {background: black; color: white;} from my css but the code below shows, but just doesnt style my element. [title~=myTitle] {background: black; color: white;}

ScottyG Over a year ago

What is the title of your element? Cause if you use the CSS rule exactly as I have it your element title should be title="myTitle"

ltjfansite Over a year ago

I changed it to "container" to match my title attribute.

ScottyG Over a year ago

Where in your html email is your CSS rule?

Florian Ludewig · Accepted Answer · 2022-12-24 09:49:35Z

-1

I'm using Maizzle for rendering emails.

I have forgot to add the inlineCSS: true to my config.production.js:

module.exports = {
  inlineCSS: true,
}

After that, it worked completely fine!

answered Dec 24, 2022 at 9:49

Florian Ludewig

6,19616 gold badges86 silver badges160 bronze badges

Collectives™ on Stack Overflow

HTML email in Gmail - CSS style attribute removed

8 Answers 8

2 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related