Forums

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<body style="background:#833155;">

<table align="center" width="600">

  <tr bgcolor="833155" height="20" class="spacer-row">

    <td></td>

  </tr>
  
  <tr>
      <td width="200"><a href="#"><img style="border:none;" style="display:block; padding:0; margin:0;" src="meccaLogo.png" alt="Mecca Bingo logo"/></a></td>
      <td width="350">

        <p style="color:#fff; font-family:Arial,helvetica,sans-seriff; font-size:10pt; font-weight:normal">Hi there, remember to add <a style="color:#fd8fc6; text-decoration:none;" href="#">somuchmore@meccabingo.com</a> to your 
address book! And if you are having trouble viewing this email then 
view me in your browser</p>
      </td>

  </tr>

  <tr bgcolor="833155" height="20" class="spacer-row">
    
    <td></td>

  </tr>

</table><!--ENDS Header-->


<table bgcolor="" cellspacing="0" cellpadding="0" align="center" id="wrapper" width="600">

  <tr>

    <td colspan="3">


      <img style="padding:0; margin:0; display:block;" src="hero.gif" alt=""/>


    </td>

  </tr>

    <tr>

      <td  style="background:#fff;" bgcolor="833155"><img style="padding:0; margin:0; display:block;" width="30" height="150" src="border_left.gif" alt=""/></td>

      <td style="width:560px;" width="560" bgcolor="ffffff">

         <p valign="top" style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;">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. <br><br>
    
      <a href="#"><img style="border:none;" align="right" src="button.gif" alt="Play cashline"/></a>

    </p>

    </td>

    <td style="background:#fff;" bgcolor="833155"><img style="padding:0; margin:0; display:block;" width="30" height="150" src="border_right.gif" alt=""/></td>

    </tr>


    <tr>

      <td bgcolor="" colspan="3">

        <img style="padding:0; margin:0; display:block;" src="borders.gif" width="600" height="45" alt=""/>

      </td>

    </tr>

     <tr>

      <td  style="background:#ffd4ea;" bgcolor="ffd4ea"><img style="padding:0; margin:0; display:block;" width="30" height="230" src="border_left.gif" alt=""/></td>

      <td style="width:560px;" width="560" bgcolor="ffd4ea">

      <table>

        <p style="margin-top:-20px;" align="center"><img src="heading.gif"/></p>

        <tr>

            <td width="15"></td>

            <td width="200"><img src="cashlineNumbersLottery.png" alt="Cashline game!"/></td>

             <td width="15"></td>
          
              <td align="left" width="300"><p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

        Sed ac congue lectus. Sed ut mi sapien. <br><br>

        Nulla malesuada quam vel lacus pellentesque eget semper tellus pellentesque..</p> 

          <a href="#"><img style="border:none;" align="left" src="button.gif" alt="Play cashline"/></a>

          </td>

        </tr>

   </table>
  
    </td>
    <td  style="background:#ffd4ea;" bgcolor="ffd4ea"><img style="padding:0; margin:0; display:block;" width="30" height="230" src="border_right.gif" alt=""/></td>

    </tr>

    <tr>

    <td bgcolor="fd8fc6" colspan="3">


      <img style="padding:0; margin:0; display:block;" src="bottomBorder.gif" alt=""/>


    </td>

  </tr>

    <tr>

      <td style="#ffffff;" bgcolor="ffffff"><img style="padding:0; margin:0; display:block;" width="30" height="230" src="footerBorder.gif" alt=""/></td>

      <td style="width:560px;" width="560" bgcolor="ffffff">
         <p valign="top" style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;">If you wish to <a style="color:#82244a; text-decoration:none; " href="#">unsubscribe from our mailing list</a>  then we’ll be sad to see you go, but
it would be nice to know why you’re leaving us. <a  style="color:#82244a; text-decoration:none;"href="">We’d love your feedback. </a>

    </p>

    <p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;"><a  style="color:#82244a; text-decoration:none; " href="">Mecca Bingo </a>is part of the <a style="color:#82244a; text-decoration:none;" href="">Rank Group</a></p>

    <p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;">Licensed and regulated by The Alderney Gambling Control Commission</p>

    <p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; font-size:10pt;">Know your limits. Please play responsibly</p>

    <p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-seriff; display:inline; font-size:10pt;">Visit <a style="color:#82244a; text-decoration:none;" href="">www.gambleaware.co.uk</a> for advice.</p>

    <table align="right">
      <tr>
        <td>  <img src="ageIcon.gif"/></td>
      </tr>

    </table>

    </td>

    <td style="#fdfdfd;" bgcolor="fdfdfd"><img style="padding:0; margin:0; display:block;" width="30" height="230" src="bottomBorderRight.gif" alt=""/></td>

    </tr>

    <tr>

    <td bgcolor="fd8fc6" colspan="3">


      <img style="padding:0; margin:0; display:block;" src="bottomContainerBorder.gif" alt=""/>


    </td>

  </tr>

</table><!--Ends wrapper-->


</body>

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

<td style="width:560px;" width="560" bgcolor="ffd4ea">

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!

treehouse : what would you like to learn today?

Forums

[Solved] Help with HTML email Volume 2