CODEWITHSUNDEEP
cssgmailhtml-emailgmail-imap
joshholat
joshholat

Reputation: 3411

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

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: <[email protected]>
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?

Upvotes: 62

Views: 96947

Answers (7)

Daniel Yahdav
Daniel Yahdav

Reputation: 63

For me Gmail was always able to render HTML attachments without any problems. A few months ago, around July 2024 it no longer does that and shows the source code instead. As a work around, you can see it on any cellphone or you click the download link and it will render correctly on your machine.

Upvotes: 0

Gaurav Bhamare
Gaurav Bhamare

Reputation: 31

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.

Upvotes: 3

Abhishek Divekar
Abhishek Divekar

Reputation: 1267

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.

Upvotes: 6

NevetsKuro
NevetsKuro

Reputation: 1006

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

Upvotes: -2

Hengjie
Hengjie

Reputation: 4672

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/

Upvotes: 39

Brombomb
Brombomb

Reputation: 7086

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/

Upvotes: 97

Didhack
Didhack

Reputation: 68

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.

Upvotes: 2

Related Questions