Outlook 2007/2010 problem

Hello Campaign Monitor Community,

I have a major problem with how an email campaign renders in Outlook 2007/2010 which is doing my head in a little.

Here is the code:

<!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" />
<title>Untitled Document</title>

</head>
<body bgcolor="#f2f2f2" style="font-size: 11pt; margin: 0; background-color: #f2f2f2; padding: 0; line-height: 110%; font-family: Helvetica, Arial, sans-serif; color: #333; text-align: center;"><table cellspacing="0" border="0" style="padding: 0;" cellpadding="0" width="100%" height="1000px">
  <tr>
    <td align="center" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;"><table cellspacing="0" border="0" id="main_table" style="padding: 0;" cellpadding="0" width="700px">
      <tr>
        <td align="center" height="320px" valign="bottom" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" width="700px"><img src="images/header.jpg" alt="" width="700" height="320" /></td>
      </tr>
      <tr>
        <td align="left" height="100px" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#FFFFFF" width="700px"><h1 style="font-size: 50pt; color: #E4134F; font-weight: lighter; line-height: 100%; margin: 0 0 0 50px; padding: 0;">food for thought...<br />
              <span style="padding: 0; color: #85B304; font-size: 12pt; line-height: 10%;">November 2010</span></h1></td>
      </tr>
      <tr>
        <td width="700px" height="10px" align="center" valign="bottom" bgcolor="#FFFFFF" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;"><img src="images/top-pink.jpg" alt="" width="700" height="10" /></td>
      </tr>
      <tr>
        <td style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#FFFFFF"><table cellspacing="0" border="0px" style="padding: 0;" cellpadding="0" width="700px" height="100px">
            <tr>
              <td style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#FFFFFF" width="50px">&nbsp;</td>
              <td align="center" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#E4134F" width="260px"><img src="images/1img.jpg" width="260" height="260" /></td>
              <td align="left" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#E4134F" width="390px"><h2 style="font-weight: lighter; font-size: 34px; color: #FFF; margin-top: 10px; margin-bottom: 10px; line-height: 100%;">Just out of the box<br />
                    <span style="font-size: 18pt; line-height: 80%;">our latest flavour packed offering.</span></h2>
                  <p class="white" style="margin: 0 0 15px; color: #FFF; padding: 0 10px 0 0; list-style-type: none;">Oriental Flavours pack: Introducing our new catering pack, a healthy alternative to the very popular Standard Breakfast and Snack packs.</p>
                  <p class="white" style="margin: 0 0 15px; color: #FFF; padding: 0 10px 0 0; list-style-type: none;">Contents:<br />
                  1 x Snax Rice Crackers 50gm<br />
                  1 x Go Natural Frugo’s 30gm (yogurt coated fruit bites)<br />
                  1 x Oriental Layer Cake 18gm<br />
                  1 x Orange Fruit Drink 250ml<br />
                  1 x Heinz 3 Fruits in Juice 120gm<br />
                1 x Sealed Serviette &amp; Spoon </p></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td width="700px" height="10px" align="center" valign="top" bgcolor="#FFFFFF" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;"><img src="images/pink-bot.jpg" alt="" width="700" height="10" /></td>
      </tr>
      <tr>
        <td height="30px" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#FFFFFF" width="700px">&nbsp;</td>
      </tr>
      <tr>
        <td align="left" height="120px" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#85B304" width="700px"><p class="midwhite" style="font-size: 18pt; line-height: 110%; margin: 20px 0; color: #FFF; padding: 0 50px;">We are pleased to announce that <span style="color: #E4134F;">The Food Designers</span> are now an agent for a delectable and scrumptious range of cookies from <span style="color: #E4134F;">The Spotted Cow Cookie Co.</span></p></td>
      </tr>
      <tr>
        <td align="left" height="380px" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" bgcolor="#FFFFFF" width="700px"><table cellspacing="0" border="0" style="padding: 0;" cellpadding="0" width="700px" height="100px">
            <tr>
              <td align="left" height="380px" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" width="380px"><img src="images/4img.jpg" width="380" height="380"  /></td>
              <td align="left" valign="top" style="padding: 0; color: #333; font-family: Helvetica, Arial, sans-serif;" width="320px"><h3 style="margin-top: 10px; color: #E4134F; font-weight: lighter; margin-bottom: 0; font-size: 24px; line-height: 100%;">Our range of cookies</h3>
                  <p style="margin: 0 0 15px; padding: 0 10px 0 0;">satisfies any and all cravings. From something nurturing and nice; something wicked and outrageous; something luscious and sexy, or something comforting to whisk you back to childhood.</p>
                <p style="margin: 0 0 15px; padding: 0 10px 0 0;">A small sample of flavours available are Moosli Yoghurt, Triple Choc Fudge, Chocolate Chip, Anzac, Chocolate Walnut Brownie, Chocolate Mud, Sticky Date/Caramel and Lemon/Poppyseed.</p>
                <p style="margin: 0 0 15px; padding: 0 10px 0 0;">Not only are there a large variety of cookie flavours available, they are several different presentations available. Cookies are available as Jar Cookies for hotel coffee shops, single or double wrap for in-room or conferencing, pillow treats or 500gm catering packs.</p>
                <p style="margin: 0 0 15px; padding: 0 10px 0 0;">Please contact us for further details on pricing or range of cookies available.</p></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td id="footer" align="center" height="100px" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; color: #333; margin: 0; padding: 0 0 10px;" bgcolor="#85B304" width="700px"><p style="margin: 0 0 15px; padding: 0 10px 0 0;"><a href="mailto:sales@thefooddesigners.com.au" style="color: #333; text-decoration: none;">sales@thefooddesigners.com.au</a> |  fax 07 5527 9337 | mobile 0413 252 559 |
          <unsubscribe>unsubscribe</unsubscribe>
        </p></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

And here is how it looks in most email clients (correct):
Other Email client

And Outlook 2007/10 (incorrect):
Outlook 2007

Any help would be really appreciated.

Kind Regards,

Richard.Wendon Richard.Wendon, 6 years ago

Hi Funk,

Personally, for best results I've found wherever possible i avoid putting padding and margin on things such as p tags. In the case of the padding to the right on the p tag i would have dropped in a table with 2 cells the left with the text in... the right a 10px wide cell. I havent had time to properly look at your code... but that would be my starting point.

Oh and also well worth adding display:block, margin: 0, padding :0 on all your images... as email clients often add their own...

Renaissance Funk Renaissance Funk, 6 years ago

Hi Richard,

Thanks for taking the time to look at this problem, and posting a possible solution.

I will implement your suggestions and let you and the community know the outcome, which I am sure will return positive at some level.

Once again thank you for your help, it is much appreciated.

Renaissance Funk Renaissance Funk, 6 years ago

To recap: I ended up, doing what was suggested by Richard, which was good because I realised I had a lot of unnecessary and repeated code that I got rid of, but the Outlook 2007/2010 tests were still dodgy. So I dumbed down even more stripped back everything, and put tables inside tables inside tables to get something that resembled the original design, and finally got something the client was happy with.

Richard.Wendon Richard.Wendon, 6 years ago

Glad you got it sorted... so busy at the moment, didn't have time to look into it properly. Apologies

Unfortunately tables within tables is often the only way to get things to behalf how you anticipate, although like everything... the more nesting you do, the more likely you are to create other issues. Its a fine line, good like walking it :)

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