HTML formatted email not showing up at all in Gmail but is in other mail clients

Css Problem Overview

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: [email protected]
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: <[email protected]>
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 [email protected]) 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 [email protected]) [email protected]
Received: by joshholat.local (Postfix, from userid 70)
	id 775063662E01; Sun, 28 Aug 2011 16:29:06 -0500 (CDT)
To: Josh Holat <[email protected]>
Subject: Password Reset Request
X-PHP-Originating-Script: 501:Email.php
From: appname <[email protected]>
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?

Css Solutions

Solution 1 - Css

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/

Solution 2 - Css

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/

Solution 3 - Css

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

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).
Gmail removes your entire <style> block if it encounters an error.
Gmail does not allow negative CSS margin values.
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.

Solution 4 - Css

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.

Solution 5 - Css

This is little late but I was also facing 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 is not supporting the Style tag anymore. Below solution worked for me:

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
Just change the property of style tag from STYLE to STYLE type="text/css" data-inline="true" and save the template and use in your job.

Done. It worked for me.

Solution 6 - Css

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

Content Type	Original Author	Original Content on Stackoverflow
Question	joshholat	View Question on Stackoverflow
Solution 1 - Css	Brombomb	View Answer on Stackoverflow
Solution 2 - Css	Hengjie	View Answer on Stackoverflow
Solution 3 - Css	Abhishek Divekar	View Answer on Stackoverflow
Solution 4 - Css	Didhack	View Answer on Stackoverflow
Solution 5 - Css	Gaurav Bhamare	View Answer on Stackoverflow
Solution 6 - Css	NevetsKuro	View Answer on Stackoverflow