Text-shadow in Chrome - Gmail fails?

Question

So, I have one web page that uses the CSS "text-shadow" for effect.

If I surf to the web page in Chrome the text-shadow effect is as I expect it to be.

But if I send an HTML email to my gmail account and view the page inside of Gmail (using the same browser), the text-shadow effect is gone.

see the linked picture. The part on the left is when surfing to the page, the part on the right is the same html content when sent to myself in gmail. As you can see, the shadow effect is gone.

PICTURE HERE: Picture

This is the CSS used:

    <style type="text/css">
        p { padding: 0; margin: 0; }
        h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
        td { vertical-align:top;}
        ul, ol { margin: 0; padding: 0;}
        .title, .date {
            text-shadow: #8aa3c6 0px 1px 0px;
        }

        .textshadow {
            text-shadow: #ffffff 0px 1px 0px;
        }
        .trxtshadow-2 {
            text-shadow: #768296 0px -1px 0px;
        }
    </style>

Sounds odd to me. Any ideas?

Answer 1

GMail doesn't support <style> blocks in e-mails. You have to use inline styles in most HTML mail for maximum compatibility. Yeah, it's ugly. But it's the current reality.

See the following:

• Campaign Monitor - Guide to css support in e-mail clients
• Sitepoint - How to code HTML newsletters
• Campaign Monitor - Email design guidlines

Answer 2

As Joshua says, gmail strips out <style> blocks, but it also strips out some some styles from inline blocks as well, including text-shadow and border-radius as I've just discovered.

If you have these styles set inline on an element in an html email, fire up firebug in gmail and take a look at them - they're gone. However if you 'show original' on the email you'll see the styles are there.

I suppose they do it to look consistent across browsers, but it's odd behaviour, and seems like a lot of work on gmail's part.