Gaps in outlook 2013

Hello All -

First of all this is my first post and I just want to say thanks so so much I have learned A TON from these forums and its helped me immensely

I am new to html email and appreciate the help

My problem - This email seems okay in all clients except the gmail app (of course! haha) and outlook 2013.

Any other general tips and pointers based on this code is really apreciated.

The gap in outlook 2013 here : http://saasimagehost.com/temp/forum.png

How its supposed to look here: http://saasimagehost.com/temp/forum2.png

in gmail app - image pending

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 760px;">
            <tbody>
                <tr>
                    <td style="width: 30px; height: 69px; background-color: rgb(235, 235, 235);">
                        <br />
                        <img alt="" height="69" src="http://saasimagehost.com/GiraffeFriends/concept6/gf56.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="760" /></td>
                </tr>
            </tbody>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 760px;">
            <tbody>
                <tr>
                    <td height="538" style="width:30px; height:538px; background-color: rgb(235, 235, 235); ">
                    </td>
                    <td height="537" style="width: 700px; height: 537px; border: 1px solid #d7d7d7">
                        <table border="0" cellpadding="0" cellspacing="0" width="698">
                            <tbody>
                                <tr>
                                    <td colspan="3" style="width: 698px; height: 152px; background-color: rgb(255, 255, 255);">
                                        <img alt="" height="152" src="http://saasimagehost.com/GiraffeFriends/concept5/gf5_05_01.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="698" /></td>
                                </tr>
                            </tbody>
                        </table>
                        <table border="0" cellpadding="0" cellspacing="0" id="Table_01" style="width: 700px;" width="698">
                            <tbody>
                                <tr>
                                    <td style="width: 27px; height: 57px; background-color: rgb(255, 255, 255);">
                                        <img alt="" height="58" src="http://saasimagehost.com/GiraffeFriends/concept5/gf5_05_02.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="27" /></td>
                                    <td style="width: 418px; height: 57px; background-color: rgb(255, 255, 255);">
                                        <span style="font-size:24px;"><span style="font-family:arial,helvetica,sans-serif;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing.</strong></span></span></td>
                                    <td style="width: 253px; height: 57px; background-color: rgb(255, 255, 255);">
                                        <img alt="" height="58" src="http://saasimagehost.com/GiraffeFriends/concept5/gf5_05_04.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="253" /></td>
                                </tr>
                                <tr>
                                    <td style="background-color: rgb(255, 255, 255);">
                                        <img alt="" height="373" src="http://saasimagehost.com/GiraffeFriends/concept5/gf5_05_05.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="27" /></td>
                                    <td style="width: 418px; height: 373px; background-color: rgb(255, 255, 255);">
                                        <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">Dear [First Name],<br />
                                        <br />
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
                                        <br />
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est architecto beatae vitae dicta sunt explicabo.<br />
                                        <br />
                                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.<br />
                                        <br />
                                        Sincerely,<br />
                                        giraffe &amp; friends</span></span></td>
                                    <td style="background-color: rgb(255, 255, 255);">
                                        <img alt="" height="373" src="http://saasimagehost.com/GiraffeFriends/concept5/gf5_05_07.jpg" style="border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; display: block; line-height: 1; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0" width="253" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td style="width: 30px; height: 538px; background-color: rgb(235, 235, 235);">
                    </td>
                </tr>
                <tr>
                    <td style="width: 30px; height: 120px; background-color: rgb(235, 235, 235);">
                    </td>
                    <td style="width: 700px; height: 120px; background-color: rgb(235, 235, 235);">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 700px;">
                            <tbody>
                                <tr>
                                    <td style="width: 500px;">
                                        <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 9px;">TM Giraffe and Friends Insurance Company<br />
                                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
                                        Privacy Policy&nbsp; |&nbsp; Unsubscribe&nbsp; |&nbsp; Contact Us</span></span></td>
                                    <td style="width: 100px;">
                                    </td>
                                    <td style="width: 35px;">
                                        <img alt="" height="35" src="http://pub.itmems4.com/1/420008703/5924/images/facebook.png" style="display:block;border:none;" width="35" /></td>
                                    <td style="width: 35px;">
                                        <img alt="" height="35" src="http://pub.itmems4.com/1/420008703/5924/images/twitter.png" style="display:block;border:none;" width="35" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td style="width: 30px; height: 120px; background-color: rgb(235, 235, 235);">
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Thanks

EDIT: I know that hex is preffered to rgb and the tbody tags arent necessary.

JohnP JohnP, 2 years ago

There are a bunch of small things you could do to simplify the layout and get more consistency between clients. So instead of fixing your email, I put together an example of how I'd recommend you lay it out instead. You should be able to just plug your content in and be ready to go.

I also set it at 600px wide as that is best practice for email max width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles - last updated 18 July 2013 */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#EBEBEB" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <img alt="Owl" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="border:1px solid #DDDDDD;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="right">
            <img alt="Giraffe & Friends" src="" width="250" height="70" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" width="300" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;">
                  <font style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #000000;">
                    Header Text<br><br>
                  </font>
                  More text here...<br>...<br>...<br>...<br>...<br>...<br>...
                </td>
                <td width="300" valign="bottom">
                  <img alt="Giraffe pic" src="" width="300" height="400" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>


          </td>
        </tr>
      </table>


    </td>
  </tr>
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="450" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;">
            Text here...
          </td>
          <td width="150">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="75">
                  <img alt="" src="" width="75" height="75" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="75">
                  <img alt="" src="" width="75" height="75" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>



</td></tr></table></td></tr></table></body></html>
EmailGrasshoppa, 2 years ago

This doesnt work for me at all. you have changed the design and the images aren't flush with the borders like they are supposed to be.

Thanks for the help anyways I will have to try a line height/font size or an if statement for mso only to fix this i think

chriswise01, 2 years ago

He did fix it and the images are flush? Your original email is wrong in many ways and he fixed them for you??

JohnP JohnP, 2 years ago

@EmailGrasshoppa Just plug your text and images into what I posted and you will be good to go.

I made some of your images smaller because there was a lot of wasted transparent space. The owl image for example doesn't need to be a full width image, so crop it around the owl and put it where I have it. Same with your "giraffe&friends" logo. There is no reason to make someone load all that empty image space, when your graphic is only in one corner.

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