Grow your CSS skills. Land your dream job.

Help with HTML email Volume 2

  • # August 21, 2012 at 5:31 am

    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:

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

    And this is how IT SHOULD look like:

    http://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….



    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


























    Mecca Bingo logo

    Hi there, remember to add somuchmore@meccabingo.com 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.



    Play cashline

























    Cashline game!

    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..



    Play cashline










    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.

























    # August 21, 2012 at 5:41 am

    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.

    # August 21, 2012 at 5:48 am

    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….

    # August 21, 2012 at 6:09 am

    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?

    # August 21, 2012 at 6:49 am

    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….

    # August 21, 2012 at 7:48 am

    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.

    # August 21, 2012 at 8:10 am

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".