Strange formatting in Gmail

Hi,

I've modified one of your excellent sample designs (I believe it was called Impact) and things look good in most email clients when I do a test, but in Gmail a graphic that should be at the right of a block (the light green saw-toothed edge) appears at the left, and a couple of odd triangular shapes appear in the red ribbons.

Can anyone suggest what might be going on here?

http://pod10.createsend.com/screens/y/7A452935ECFF95E8

Many thanks in advance for any insights,

Barnaby

versus, 4 years ago

Hi - My first impression is that you haven't set the background position of those images (saw tooth and triangles).

So try looking for, or adding:

 
. WHATEVER THE CLASS IS {

     background: #ffffff url('PATH TO IMAGE') no-repeat 100% 0%;

}

The importtant bit is the 100% 0% - Change that value around to move the background position. Give that a go. Change the color accordingly and path.

Barnaby, 4 years ago

Hi Versus,

Thanks for getting back to me. The background-position property is being set, to "right" as you can see from the code snippet below:

<td style="background-image: url(images/jags.gif); background-repeat: repeat-y; background-position: right; padding-bottom: 10px;" valign="top" bgcolor="#0099ff">

I tried your suggestion of "100% 0%" too but that didn't make a difference. I also went back to the original "Impact" html template and ran a test with that, and the same thing happened. Based on what I've read elsewhere on the forums, it seems that Google may have made some changes to Gmail, and that certain rules and declarations are no longer being respected.

I actually wrote to the designer of the template, but he informed me that it was coded by the folks at Campaign Monitor. Since the issue exists in one of the provided base templates I'm hoping they'll be able to step in (not sure if you are an employee or not).

I'm continuing  to play around with this, but any further thoughts would be appreciated!

Barnaby

roshodgekiss roshodgekiss, 4 years ago

Hey there Barnaby and versus, nice one on the debugging so far. Just a note that Gmail does not support background-position, which is why you're having these issues here. This is really our bad, as you're using one of our templates, which obviously includes code that's not widely supported.

The way to get around this is to create a new table cell to the right of the table of contents, which contains the background image.

As this trouble is largely our fault, I've gone ahead and added a tweaked template to your account, called 'NCM Template - Ros fix'. It looks like this in Gmail:

http://f.cl.ly/items/35313G1V2L1N3I0Y1z13/ros-fixed.png

As you can see, the headings in the right-hand column share the same background-position issue, but it you take a look at the code I've used, you'll be able to fix this rapidly.

Cheers, Barnaby! I hope this helps.


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

Hi Rosh,

Thanks very much for this. Your solution makes sense, but I am still experiencing some quirky behaviour with this template. Creating a new table cell with a background image works for the saw-tooth graphic in gmail, but I have found that the image does not repeat in all email clients (Outlook for one)

Also, in adding an extra cell to the red ribbon table in the main content column I now see an extra bit of red underneath the triangular graphic at right - look at the NCM - Final template to see what I mean.

I've spent a great deal of time and created a bunch of alternate templates trying to troubleshoot this, but without 100% satisfaction.

Any further suggestions?

Thanks,

Barnaby

roshodgekiss roshodgekiss, 4 years ago

Hey there Barnaby, thanks for your feedback here. I'll do my best to help out :)

I have found that the image does not repeat in all email clients (Outlook for one)

Unfortunately, repeating background-images are not supported in Outlook 2007/2010/2013. What I did here is add a static img src= image so it didn't look entirely broken. You can remove it if it doesn't look right in Outlook.

Also, in adding an extra cell to the red ribbon table in the main content column I now see an extra bit of red underneath the triangular graphic at right

I believe this is now fixed. I added img { display: block; } as per this fix and updated the template - consequently, the gap disappeared.

Thanks, Barnaby! If you have a designer on hand, it may be worth running template issues past them in the future for quick fixes - although these templates are distributed by us, really any designer should be able to alter them as they see fit. Naturally, we're happy to help out here, we're not always the speediest and shouldn't substitute whoever customized the template for you. :) All the best with your campaigns!


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

Hi Rosh,

Thanks very much for your help again.

Which template did you modify this time?

Barnaby

roshodgekiss roshodgekiss, 4 years ago

'NCM - Final' I believe. Let me know if anything's amiss :)


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

Awesome, thanks so much! Everything is looking great finally!

The only small issue I'm having is that when I have columns of unequal length, the shorter one does not fill to 100% height with the correct background - you'll see what I mean if you look at either of the two templates I have on my page.

You've been extraordinarily helpful, so I hate to ask you for more help, but if you have any ideas on this they would be appreciated!

Thanks so much again,

Barnaby

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