Help with HTML email

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 if that helpls...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 width="162" height="59" 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;" width="600" height="266" 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;" width="174" height="36" 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 width="500" height="26" src="heading.gif"/></p>

        <tr>

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

            <td width="200"><img width="198" height="148" 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;" width="174" height="36" 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;" width="600" height="97" 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" width="90" height="40" alt="18+ Age restriction"/></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>
roshodgekiss roshodgekiss, 4 years ago

Hey there vasilev89, thanks for writing in about your campaign. The issue here was simply some malformed HTML code. For example, there was content outside of <td> cells in tables,  incorrect colspan="" values on table cells and cell widths weren't adding up. On a more minor note, background colors weren't prefixed with a # hash, ie. ffffff, instead of #ffffff.

In the future, I recommend running your code through an HTML email validator like Fractal or even the W3C Validator to pick out potential issues prior to testing your code.

Anyway, I did a bit of a cleanup and here's the end result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="#833155">
<table align="center" width="600">
  <tr bgcolor="#833155" height="20" class="spacer-row">
    <td></td>
  </tr>
  <tr>
    <td width="200"><a href="#"><img width="162" height="59" style="border:none; display:block; padding:0; margin:0;" src="meccaLogo.png" alt="Mecca Bingo logo"/></a></td>
    <td><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 cellspacing="0" cellpadding="0" align="center" id="wrapper" width="600">
  <tr>
    <td colspan="3"><img style="padding:0; margin:0; display:block;" width="600" height="266" src="hero.gif" alt=""/></td>
  </tr>
  <tr>
    <td width="30" bgcolor="#833155"  style="background:#fff;"><img style="padding:0; margin:0; display:block;" width="30" height="150" src="border_left.gif" alt=""/></td>
    <td bgcolor="#ffffff"><p style="padding:0px 15px; margin-top:0px; font-family:Arial, helvetica, sans-serif; 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;" width="174" height="36" align="right" src="button.gif" alt="Play cashline"/></a> </p></td>
    <td width="30" bgcolor="#833155"><img style="padding:0; margin:0; display:block;" width="30" height="150" src="border_right.gif" alt=""/></td>
  </tr>
  <tr>
    <td 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 bgcolor="#ffd4ea"><table width="100%">
        <tr>
          <td colspan="4"><p style="margin-top:-20px;" align="center"><img width="500" height="26" src="heading.gif"/></p></td>
        </tr>
        <tr>
          <td width="15"></td>
          <td width="200"><img width="198" height="148" 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;" width="174" height="36" 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;" width="600" height="97" 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 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" width="90" height="40" alt="18+ Age restriction"/></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>
</html>

Thanks, vasilev89 - all the best with your campaign!


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

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