CSS inside HTML email doesn't invoke/render until REPLY is clicked

Question

I have a PHP system that sends auto-generated emails to subscribers of my service. The HTML is all valid, and there is an absolute reference to my css file. In the HTML below I have obfuscated and changed actual paths and info, but it is all valid. When I view the HTML in a browser it looks perfect. When I receive the email, it's clear that the CSS is not being invoked BUT as soon as I hit reply, the CSS gets invoked and everything looks correct.

Why is it that the CSS doesn't get invoked until I hit reply? How can I fix this?

PHP is generating the email and the full email source is below:

Envelope-to: x@z.com
Delivery-date: Mon, 24 Feb 2014 00:00:15 -0700
Date: Mon, 24 Feb 2014 00:00:12 -0700
To: a@b.com,x@z.com
Subject: mysystem Reminder - You have upcoming games
From: stuff@box123.bluehost.com
Reply-To: no-reply@mysystem.com
Content-type: text/html

<html><head><link href='http://www.mysystem.com/Style.css' rel='stylesheet' type='text/css' /></head>
<body><table cellpadding="10" cellspacing="0" border="1" class="BasicGray" style="margin-left:3px">
    <tr class="BlueTop">
        <td align="center"><b></b></td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>Referee:</td>
                    <td>Jim Jones</td>
                </tr>
                <tr>
                    <td>Game:</td>
                    <td>Youngblood Elite</td>
                </tr>
                <tr>
                    <td>Date:</td>
                    <td>Friday, February 28, 2014 - 5:00 PM</td>
                </tr>
                <tr>
                    <td>Location:</td>
                    <td>XYZ Academy High School | Court #2 | 123 S 560 W Bluffdale</td>
                </tr>
                <tr>
                    <td>Partner(s):&nbsp;</td>
                    <td><a href='mailto:somebody@gmail.com'>Anthony Walker</a> - (801) 555-5555</td>
                </tr>
                <tr>
                    <td>Schedule ID#:&nbsp;&nbsp;</td>
                    <td>2114</td>
                </tr>
            </table>
        </tr>
    </table>
</table>
<br><br>
&nbsp;&nbsp;<a href='http://www.mysystem.com/Login.php'>View/Edit your schedule online</a><br><br>&nbsp;&nbsp;To <b>unsubscribe</b> from these email reminders, <a href='http://www.mysystem.com/Login.php'>log in</a> to your mysystem account and click on <i>Profile</i>.<br><br><br>
</body></html>

i would suggest you to use `inline or external css` rather than loading from other server... — Nishant Solanki, Feb 24 '14 at 13:29
HTML emails are not like typical webpages, you need to inline all your CSS as most email clients will ignore external CSS. Ideally you should directly inline everything on the elements via the `style` attribute as some clients strip out ` — Ennui, Feb 24 '14 at 13:32
I inlined the CSS and had only limited success. I referenced a css class both in my element and in my element. The table class worked but the tr class did not. Could it be that some email clients don't recognize css in a tr element? — HerrimanCoder, Feb 24 '14 at 13:47
Even when I receive and view the email into my gmail web client, the inline styles don't work. I thought it would work in a browser-based web client at very least. I'm using inline styles now, still no dice. — HerrimanCoder, Feb 24 '14 at 13:52
possible duplicate of [Best practices for styling HTML emails](http://stackoverflow.com/questions/4829254/best-practices-for-styling-html-emails) — Michael Irigoyen, Feb 24 '14 at 13:55
@SweatCoder HTML emails are notoriously painful to implement - Outlook is so dreadful at rendering you'll wish you were developing for IE6, and webmail clients like Gmail aren't much better. Best bet is to use an existing boilerplate - I can highly recommend Ink (http://zurb.com/ink/) — Matthew Daly, Feb 24 '14 at 13:55
@SweatCoder Gmail strips out any styles that are outside the body. I'm not sure you're getting what is meant by inline styles. You need to put your styles in the elements using the `style` tag to get them to work with Gmail — Matthew Daly, Feb 24 '14 at 14:13

score 3 · Accepted Answer · answered Feb 24 '14 at 13:28

3

I suggest using inline CSS as some mail clients not always recognize non-inline CSS.

answered Feb 24 '14 at 13:28

Justinas

41,402
5
66
96

OK, mystery solved. Yes, inline CSS was the answer, but there's another data point on this. When I first inlined, one of the styles didn't work. That style didn't work because there was no text inside the element, so it was collapsed. Once I got the text in there, inline styles worked great in both mail clients I have (gmail web AND windows live mail desktop software). Thanks Justinas. – HerrimanCoder Feb 24 '14 at 14:16

Matthew Daly · Answer 2 · 2014-02-24T13:56:42.413

As Justinas said, inlining your CSS is the way to go as many clients strip out CSS that is not inline. An external stylesheet won't work at all in most clients.

I can point you in the direction of the inliner for Zurb's Ink framework. You'll still have to move the styles into your email template, but that inliner should handle inlining it for you.

As an aside, HTML emails are legendarily painful, especially in webmail clients and Outlook (Outlook, I believe, switched away from using IE's rendering engine to using the one from Word). I highly recommend using a boilerplate like Ink to ease the pain.

CSS inside HTML email doesn't invoke/render until REPLY is clicked

2 Answers2