Gmail.. doing my head in. Gmail Formatting issues!

Hello - I'm having trouble with formatting my email for Gmail. It's never happened before so I'm stumped.

I've tested it online - Look good. Tested in various clients (Hotmail, Yahoo etc) - Looks good. But Gmail isn't working.

Its the minimalist eflyer I've dont yet the most painful!

Anyone had similar problem?

Here's the eflyer if anyone would like to help.

Step, 4 years ago

Hey Versus,

When using styles. Make sure you're using inline style. 

With regards to the formatting.  Was there anything in particular that you was having trouble formatting with? 

If it's the links colour - use a <span> tag around the copy as well to force the colour.

e.g. <a href="URL" style="color:#003366;"><span style="color:#003366;">My Link</style></a>

Cheers
Step


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
versus, 4 years ago

Hi Step - Thanks for the reply. I usually let CM add styles in-line (especially if I'm feeling lazy) which hasen't been a problem. I also re-wrote the whole template using in-line think it was that but nada. Still looks odd. Basically Gmail dosent seem to be litening to any styling of the text.

This is how it looks in Gmail
http://www.versus.uk.com/forum/bad.png

This is how I want it to look
http://www.versus.uk.com/forum/good.png

Any thoughts?

roshodgekiss roshodgekiss, 4 years ago

Hey there versus, the issue is with a rather strange bug in Gmail, that results in it stripping out styles that it doesn't support... And more. In this case, I found that pretty much all the styles that you had applied to .title and .copy were being stripped out, simply because it doesn't like the following CSS properties:

text-shadow:1px 1px 2px #ffffff;
filter:dropshadow(color=#ffffff, offx=1, offy=1);

I've been able to work around this by giving the text-shadow/filter its own class. For example:

span.shadow { text-shadow:1px 1px 2px #ffffff; filter:dropshadow(color=#ffffff, offx=1, offy=1); }
span.title { ... }

...

<span class="shadow title">Me and Me Dad and Me Wife</span>

Surprisingly this works, however you won't get the shadow effect in Gmail, because it just doesn't support it.

Thanks, versus! Let us know how you go. Have a great weekend ahead!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
versus, 4 years ago

Thanks the info roshodgekiss

I couldn't get this to work despite adding the shadow class..... I did just notice that I had added the class after the 'title' class.

I did this

<span class="title shadow">Me and Me Dad and Me Wife</span>

Where as you've done this

<span class="shadow title">Me and Me Dad and Me Wife</span>

Do you think this would still cause the inconsistency?

I've actually changed the design and removed the shadow as I preferred the look of it without on browsers (still using it for mobile devices, which  seems to work ok).

Check it out here: eflyer

Thanks for your help.

roshodgekiss roshodgekiss, 4 years ago

Hey there versus, that shouldn't cause any issues in theory... However, I've learnt over time that nothing's beyond Gmail's rendering quirks ;)

Even without the shadow effect, the eflyer looks great! Hopefully from here on in it's smooth sailing... Fingers crossed :)

Thanks, versus - all the best!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
versus, 4 years ago

Thanks - eflyer has gone. I 've never before had such problems with Gmail.

.. and whilst I'm on the topic. I just noticed that Gmail does not like this font stack.

font-family: Monaco, Consolas, "Lucida Console", monospace;

Does that same as before - stripes out the rest of the formatting.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098