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

6

61

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?

Costanzo answered 28/8, 2011 at 21:47 Comment(3)
Can you post the entire source (including headers) of one of your messages?Previdi
Your HTML-example ends after the opening <body>-tag…Iquitos
I added all of the headers as well as the rest of the HTMLCostanzo
W
97

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/

Winterize answered 28/8, 2011 at 23:14 Comment(7)
Really? Wow. That's pretty bad... Thanks for the link.Costanzo
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!Proposition
Running your HTML through this library before mailing it will take the styles from your head and parse them to inline.Gwennie
Gmail now does support styles developers.google.com/gmail/design/css but this won't help for all the other web based email clients.Megaera
Alright so this answer is stale. Anyone getting this problem in 2019?Taverner
@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.Winterize
I would like to add one point: as per this link, it seems that Gmail only supports <style> tags in the <head>. From the link: "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".Superstitious
B
39

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/

Beltz answered 19/2, 2013 at 22:51 Comment(2)
That's the handiest tool and link for this task. Thanks!Tennyson
First link redirects to mailchimp.com/resources and isn't helpful. Second link redirects to beaker.mailchimp.com/inline-css and doesn't work.Zygote
S
6

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.

Superstitious answered 11/5, 2019 at 7:48 Comment(0)
B
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.

Bettis answered 23/4, 2021 at 11:16 Comment(0)
S
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.

Servile answered 2/10, 2013 at 15:40 Comment(0)
F
-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
Fed answered 3/4, 2021 at 7:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.