Gmail stretching html email content?

Hi there,

I've trying to get my html email to display correctly in Gmail.  It seems to vertically pull everything apart.  Thing is it renders fine in Gmail set to basic html mode, it also renders fine in all outlooks and apple mail.

What am I missing here?  Is there a trick a technique.. anything that can solve this?

Here's a link to the edm:

http://www.miketayler.com/edm/

Thanks :)

Diana Diana, 7 years ago

Hey Mike,

Have you tried giving a number width to the top table rather than a percentage? And do you need the defined height in there? That could cause some display issues if it isn't perfect.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Mike123, 7 years ago

Hi Diana, thanks for the reply.  Just tried your suggestion of using a fixed width with no luck.. removing the height also proved ineffective..

It seems really strange especially when I compare my edm to others I receive in my inbox and see no major difference..

Maybe I'll look at it in the morning and figure it out.

Thanks. :)

Diana Diana, 7 years ago

Mike,

If you have a screenshot of how it's breaking in Gmail that might help. I just took a couple random guesses from the first few lines of code, but if we can see exactly what's going wrong it'll be easy to say why (other than the standard Gmail sucks).


~*~~*~~*~~*~
D. Potter
Campaign Monitor
rmills, 7 years ago

Mike,

In the TD that has "Advant also provides quarterly"...  There is a missing </td> and an extra </span> which might be causing issues...

Thanks,
Rich

Mike123, 7 years ago

Hey Richard, thanks for pointing those out.  I added the </td> and got rid of the span but still no luck..

Diana here's a screen shot of what it looks like in Gmail.

http://www.miketayler.com/edm/stretch.html

Thanks

Mike123, 7 years ago

Hey thanks for everyones help.  In the end I just had to rearrange the table layout to "minimize" the effects of the stretching, not really a fix but I had to get this in.
I still have no idea how to solve this problem and would like to know for future edms....

Has anyone else had this issue?

many thanks,

Mike.

fyredefyre fyredefyre, 7 years ago

It could be your images causing you grief - try adding:

img { display:block; }


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
rmills, 7 years ago

Mike,

I just ran a quick test on the top menu.  When seperated from the other code it still doesn't render properly, however, if you remove the <p> tags and move the styles into the td (obviously removing the </p>'s), that top table renders fine...  We never use <p> tags here at Alchemy Worx, this is one of the reasons why...

Hope that helps...
Rich

Mike123, 7 years ago

Richard,

That was it!

Thanks mate VERY good to know.

Cheers,

Mike.

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