Help with HTML email Volume 2

[antonio_89]

Hey guys!

I need help with debugging an email i’m working on at work.

The problem is simple:

Gmail and Outlook break.

The following image is a screenshot of the broken email in gmail:

https://www.dropbox.com/sh/9kh9fwo3f1s36lv/McAm6lPy11#f:mailScreenshot_01.jpg

And this is how IT SHOULD look like:

https://www.dropbox.com/sh/9kh9fwo3f1s36lv/McAm6lPy11#f:mailScreenshot_02.jpg

It seems that gmail is stretching out the TD’s containing the actual content. I have tried to specify a width but that didtn work.

Any help would be GREATLY appreciated.

Below is my code….

Hi there, remember to add [email protected] to your

address book! And if you are having trouble viewing this email then

view me in your browser






































































































Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac congue lectus. Sed ut mi sapien. Nulla malesuada quam vel lacus pellentesque eget semper tellus pellentesque. Sed non tempor tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. 






































































Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Sed ac congue lectus. Sed ut mi sapien. 





Nulla malesuada quam vel lacus pellentesque eget semper tellus pellentesque..













































If you wish to unsubscribe from our mailing list  then we’ll be sad to see you go, but

it would be nice to know why you’re leaving us. We’d love your feedback. 







Mecca Bingo is part of the Rank Group




Licensed and regulated by The Alderney Gambling Control Commission




Know your limits. Please play responsibly




Visit www.gambleaware.co.uk for advice.

[Paulie_D]

I can’t swear that it’s this because we can’t see it live (perhaps you could put it up in Codepen) but this

looks wrong as you have two widths going on.

[antonio_89]

Hi Paulie,

No, its not that…. though i will strip them out as they are unecessary. I Just decided to specify two width just in case gmail and outlook dont recognize the old skool table styling tags…. but as it turns out, it completely ignores them.

Codepen wont display the images thoug, would it? And i dont really want to upload it to a live server….

[Paulie_D]

Codepen can display images if they are hosted somewhere.

If not use placeholder images the same size:

http://www.placehold.it/ or http://lorempixel.com/

Also, can you not strip out the majority of the inline styles and just put them in the head like normal css?

[antonio_89]

AHA!

Found the issue. I validated my code and turns out ive got a few rogue tags here and there and its all working perfectly now!

God html emails are a pain….

[Paulie_D]

I would suggest that you look at Mailchimp. They look pretty good to me and I’m giving them a spin in my next mailout.

[antonio_89]

Thanks dude! I’m already using mailchimp to run my tests – its an awesome service!

[Author]

Posts