58

I'm currently sending html formatted emails from PHP's mail() function and checking them simply to make sure they are showing up as HTML (formatting aside, I'm well aware that the formatting will vary (probably drastically) from client to client). They are displaying as HTML in the Apple Mail client as well as on my iPhone. However, Gmail simply refuses to display it as HTML as all. And by that I don't mean it is formatted incorrectly, it just simply isn't using HTML it appears.

The weird part is that an img from a tag is being loaded, but that's about it... is it that I'm mostly using divs for layout and that's too new for Gmail or something (vs tables)?

As far as CSS and what not goes, viewing the raw source shows the following:

<html><head><style>body { background-color: #F2F2F2; font-family: Arial; color: #5C5C5C; font-size: 11pt; } a { color: #46AAFF; text-decoration: none; } #container { width: 750px; margin-right: auto; margin-left: auto; } #header { float: right; padding: 3px; height: 30px; } #header a { color: #666666; margin-right: 10px; } #mainBody { padding: 20px; background-color: #FFF; border: 1px solid #DADADA; border-radius: 3px; } #imageArea { border-top: solid #E8E8E8 1px; margin: 15px; } #singleImageArea { width: 250px; padding: 15px; } #singleImageArea p { float: right; line-height: 30px; width: 130px; margin-top: 20px; } #footer { padding: 10px; color: gray; } #footer p { text-shadow: 0px 2px #FFF; font-size: 10pt; } #footer a { color: #ADADAD; float: right; padding-left: 20px; padding-right: 20px; } #footer img { width: 35px; height: 23px; padding: 10px; float: left; } </style></head><body><div id="container"><div id="header"><a href="http://appname.local/login/">Login</a></d
 iv><div style="clear: both;"></div><div id="mainBody"><h1>Hi Josh Holat!</h1>You've sent a request to <strong>reset</strong> your appname password. Just click the link below <em>(or copy and paste it into your browser)</em> and follow the instructions to set a new password. The link will expire in one hour.<br/><br/><a href="http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720">http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720</a><br/><br/>If you feel this request was submitted in error, don't worry; you can safely ignore this e-mail and your password will not be changed.<br/><br/>Much Love,<br/>Us</div><!-- #mainBody --><div id="footer"><img src="http://appname.local/images/email/footer_sb.png" /><p>&copy; 2011 appname, Inc. All Rights Reserved <a href="http://appname.local/sb/legal/">Legal</a><a href="http://appname.local/sb/contact/">Contact</a><a href="http://s
 tagebloc.local/sb/developers/">Developers</a><a href="http://appname.local/sb/blog/">Blog</a></p></div><!-- #footer --></div><!-- #container --></body></html>

As well as:

    Delivered-To: appname@gmail.com
Received: by 10.229.40.2 with SMTP id i2cs133298qce;
        Sun, 28 Aug 2011 14:29:08 -0700 (PDT)
Received: by 10.42.152.199 with SMTP id j7mr4419937icw.417.1314566947950;
        Sun, 28 Aug 2011 14:29:07 -0700 (PDT)
Return-Path: <_www@joshholat.local>
Received: from joshholat.local (arh2281.urh.uiuc.edu [130.126.70.193])
        by mx.google.com with ESMTP id w3si6800550icz.109.2011.08.28.14.29.06;
        Sun, 28 Aug 2011 14:29:06 -0700 (PDT)
Received-SPF: neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of _www@joshholat.local) client-ip=130.126.70.193;
Authentication-Results: mx.google.com; spf=neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of _www@joshholat.local) smtp.mail=_www@joshholat.local
Received: by joshholat.local (Postfix, from userid 70)
    id 775063662E01; Sun, 28 Aug 2011 16:29:06 -0500 (CDT)
To: Josh Holat <appname@gmail.com>
Subject: Password Reset Request
X-PHP-Originating-Script: 501:Email.php
From: appname <noreply@appname.com>
Content-type: text/html
Message-Id: <20110828212906.775063662E01@joshholat.local>
Date: Sun, 28 Aug 2011 16:29:06 -0500 (CDT)

I'm confused as to why third party clients would show it fine but Gmail simply ignore it?

joshholat
  • 3,371
  • 9
  • 39
  • 48

6 Answers6

93

I am updating my answer since it has quite a few views, and new tools are available. I am leaving my original answer for posterity.

Edit * 9/19/19

You can find CSS property support by email client here: https://www.caniemail.com/

Original Answer:

Gmail does not support the <style> tag. You need to use inline css for gmail to work correctly.

Here's a reference list. http://www.campaignmonitor.com/css/

Brombomb
  • 6,988
  • 4
  • 38
  • 57
  • 17
    Really? Wow. That's pretty bad... Thanks for the link. – joshholat Aug 28 '11 at 23:17
  • 8
    Wow, it's amazing to see such a bad support from Gmail which is one of the most popular email services! Apple mail and Android 4 (Gmail) seem to be way ahead with the support. I'm really surprised about Gmail though! – DS. Oct 18 '13 at 14:13
  • Running your HTML through [this library](https://github.com/tijsverkoyen/CssToInlineStyles) before mailing it will take the styles from your head and parse them to inline. – Ethan C Mar 23 '16 at 20:14
  • Gmail now does support styles https://developers.google.com/gmail/design/css but this won't help for all the other web based email clients. – Dave Anderson Aug 25 '17 at 06:42
  • 1
    Alright so this answer is stale. Anyone getting this problem in 2019? – png Apr 23 '19 at 21:02
  • 3
    @Solvitieg The link above is still relevant and up to date with email clients. Yes this is still the same issue with email clients from 5 years ago. – Brombomb Apr 24 '19 at 22:49
  • I would like to add one point: as per [this link](https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/), it seems that Gmail only supports ` – Abhishek Divekar May 11 '19 at 07:39
38

GMail doesn't support <style> tags and neither does a number of clients. To make your life easier, you can use convert to convert your style tags to inline CSS: https://templates.mailchimp.com/resources/inline-css/

Half_Duplex
  • 5,102
  • 5
  • 42
  • 58
Hengjie
  • 4,598
  • 2
  • 30
  • 35
  • 1
    That's the handiest tool and link for this task. Thanks! – Patrick Dec 21 '16 at 21:57
  • First link redirects to https://mailchimp.com/resources/ and isn't helpful. Second link redirects to http://beaker.mailchimp.com/inline-css and doesn't work. – craigh Aug 14 '23 at 16:55
5

The above answers are pretty good, just wanted to add a few more points. All credits to this link:

  1. Gmail only supports <style> in the <head>. Gmail does support embedded styles (<style>). However, embedded styles are only supported in the head of your HTML document. The Gmail Android and iOS apps does not support <style> at all when rendering emails retrieved through non-Google accounts (GANGA).

  2. Gmail removes your entire <style> block if it encounters an error.

  3. Gmail does not allow negative CSS margin values.

  4. Gmail does not support attribute selectors and most pseudo-classes. e.g. div[class="content"]{ color: red }. Gmail also does not support pseudo-classes like :checked and :active.

Edit: in retrospection after 3 years, Gmail CSS is pretty weird.

Abhishek Divekar
  • 1,131
  • 2
  • 15
  • 31
3

This is a little late, but I also faced the same issue after changing the Mail SMTP from Outlook to Gmail. The email was not coming in the default expected template format as Gmail no longer supports the Style tag. The below solution worked for me:

  1. Copy the default email template code to your email-templates folder under .jenkins directory. Link to copy the template: https://github.com/jenkinsci/email-ext-plugin/blob/master/src/main/resources/hudson/plugins/emailext/templates/groovy-html.template

  2. Change the property of the style tag from STYLE to STYLE type="text/css" data-inline="true" and save the template and use it in your job.

Done. It worked for me.

Montaro
  • 9,240
  • 6
  • 29
  • 30
Gaurav Bhamare
  • 31
  • 1
2

I see you're using an ID named #footer. It seems that Google doesn't recognize that name when dealing with mails. Notice that in the font code seen from gmail, all your ID might appear with "exc" + idName, except #footer. Try to use a different name.

Didhack
  • 58
  • 8
-2

Do It by Clearing browsing data from browser and then load the gmail. It will still show html content. On the same page do hard refresh.

Mac: 

Command+Shift+R
Windows: 
Control+Shift+R
NevetsKuro
  • 604
  • 7
  • 14