CODEWITHSUNDEEP
google-chromecssgmail
Ted
Ted

Reputation: 20184

Text-shadow in Chrome - Gmail fails?

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?

Upvotes: 4

Views: 3767

Answers (2)

willmorton
willmorton

Reputation: 43

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.

Upvotes: 3

Joshua Carmody
Joshua Carmody

Reputation: 13740

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:

Upvotes: 6

Related Questions