Outlook 2007 - The Only Client Not Displaying Correctly

Here's the code. It works in EVERY other client according to the design tests here on CM.

I've inserted blue spacers to visualize the problem areas. It mostly seems to be the left and right-most <td>'s in some cases are displaying the right size, other times not.


The screenshot for Outlook 2007 is here:

http://www.geekless.com/clients/pd/outlook2007-screen.jpg


And here's what it "should" look like:

http://www.geekless.com/clients/pd/oe6.jpg


Any insight is greatly appreciated. Thank you.


The Code: (Also located here: http://www.geekless.com/clients/pd/build6.html)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body style="width: 99%;">
<br>
<table style="font-family: Arial, Helvetica, sans-serif;" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td width="33%"></td>
            <td style="width: 544px;" width="544px">
           
            <!--Begin Content-->
           
            <table border="0" style="font-family: Arial, Helvetica, sans-serif; width: 544px;" width="544px" cellpadding="0" cellspacing="0">
            <tr>
            <td id="header" width="544"><a href="http://www.planetds.com"><img src="http://planetds.com/email/images/header.gif" border="0" alt="Planet Data Solutions,
            Inc."></a></td>
            </tr>
           
            <tr><td height="1px" bgcolor="#ffffff"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" height="1px" width="20px"></td></tr>
           
            <!--Top Gray Bar-->
           
            <tr>
            <td height="10px" bgcolor="#999999"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" height="10px" width="20px"></td>
            </tr>
            </table>
           
            <!--Begin Text Area-->
           
            <table width="544" border="0" style="border: 1px; border-color: #999999; border-style: solid; font-family: Arial, Helvetica, sans-serif; width: 544px;" cellpadding="0" cellspacing="0">
           
            <tr>
            <td width="20px" height="10px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" height="10px" width="20px"></td>
            <td colspan="2" width="524px"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" height="10px" width="20px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td width="auto"><img src="http://www.planetds.com/email/images/international.gif" alt="Litigation Support Tips: International Edition"></td>
            <td width="85px" align="right"><img src="http://planetds.com/email/images/value.gif" alt="Value, Talent, Technology, Trust. Planet Data Solutions, Inc."></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td><span style="font-size: 17px; font-weight: bold; color: #004075">International eDiscovery "Best Practice" Tip #8</span></td>
            <td></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" height="1px" width="20px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            <td colspan="2" width="524px"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td colspan="2"><span style="font-size: 12px; font-weight: bold; color: #000000">How to get data out of the EU and into the US – Part
            3: Model Contracts</span></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="5px"></td>
            <td colspan="2" width="524px"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="5px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="50px"></td>
            <td colspan="2" width="524px"><span style="font-size: 12px; font-weight: normal; color: #004075; line-height: 17px;">Contract terms can also be used to ensure the adequate level of
            protection required by the Directive. The European Commission has issued two sets of contract terms dealing with transfers of data from:
            </span>
            <br><br>
           
            <span style="font-size: 12px; font-weight: normal; color: #000000; line-height: 17px;">
            (i) an EU based controller to a non-EU based processor and
            <br>
            (ii) an EU based controller to a non-EU based controller
            </span>
            <br><br>
           
            <span style="font-size: 12px; font-weight: normal; color: #000000; line-height: 17px;">
            The organisation that determines the purposes for which and the manner in which personal data are processed is called a <strong>“controller� </strong>. A controller calls the shots in terms of how personal data are processed. A <strong>“processor� </strong> on the other hand, merely processes personal data on behalf of the controller. A processor can only act on the instructions of the controller and cannot use the data for its own purposes.
<br>
<br>

Provided these model contracts are not modified in any substantive way, signing them will ensure the adequate level of data protection required for transfers of personal data to non-EEA countries. In some EU countries, such as France and Spain, you are required to submit a copy of the finalised model contract to the relevant supervisory authority for approval. In other countries, such as the UK or Sweden, model contracts can be used without the need for prior approval.<br>
<br>


Copies of these model contracts can be downloaded from the Europa website<br>
<a href="http://ec.europa.eu/justice_home/fsj/privacy/modelcontracts/index_en.htm">http://ec.europa.eu/justice_home/fsj/privacy/modelcontracts/index_en.htm</a>
<br><br>

To download a copy of the Directive, visit the Europa website:<br>
<a href="http://ec.europa.eu/justice_home/fsj/privacy/law/index_en.htm">http://ec.europa.eu/justice_home/fsj/privacy/law/index_en.htm</a>
<br><br><br>

<a href="mailto:tips@planetds.com">Click here</a> To contact Planet Data regarding International eDiscovery questions.
<br><br>
<span style="font-size: 10px; font-weight: normal; color: #000000; line-height: 12px;">Planet Data provides state-of-the-art expertise, experience and new technologies in an integrated, full service, and cost-effective format that generates reliable results and faster data turnaround.
<br>References provided upon request.</span>
</span>
            </td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="50px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            <td colspan="2"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            </tr>
           
            </table>
            <!--End Text Area-->
           
           
            <!--Gray Footer-->
           
            <table border="0" style="font-family: Arial, Helvetica, sans-serif; width: 544px;" width="544px" cellpadding="0" cellspacing="0">
           
            <tr>
            <td width="20px" bgcolor="#999999"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="20px"></td>
            <td colspan="2" align="center" bgcolor="#999999" height="20px"><span style="font-size: 12px; font-weight: bold; color: #ffffff;">
            <a href="mailto:confirm@planetds.com?subject=CONFIRM">Click Here</a> to continue receiving eDiscovery Best Practice Tips.</span></td>
            <td width="20px" bgcolor="#999999"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="20px"></td>
            </tr>
           
            <tr>
            <td bgcolor="#ffffff" width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td colspan="2" bgcolor="#ffffff"></td>
            <td width="20px" bgcolor="#ffffff"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            </tr>
           
            </table>
           
            <!--Blue Footer-->
           
            <table border="0" style="font-family: Arial, Helvetica, sans-serif; width: 544px;" width="544px" cellpadding="0" cellspacing="0" bgcolor="#385c95">
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            <td colspan="4" width="524"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td><span style="font-size: 14px; font-weight: bold; color: #ffffff;">1.800.688.2812</span></td>
           
            <td align="center"><a href="mailto:info@planetds.com?subject=Information Request">
            <img src="http://planetds.com/email/images/new_contact-but.gif" height="17" width="65" align="top" border="0" alt="Contact Planet Data Solutions, Inc."></a></td>
           
            <td align="center"><a href="http://www.planetds.com/downloads/PD_CorpBro4WebSite.pdf">
            <img src="http://planetds.com/email/images/new_brochure-but.gif" height="17" width="106" align="top" border="0" alt="Download Brochure"></a></td>
           
            <td align="right"><a href="http://www.planetds.com"><span style="font-size: 14px; font-weight: bold; color: #ffffff;">planetds.com</span></a></td>
            <td width="20px            "><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            <td colspan="4"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            <td align="center" colspan="4"><span style="font-size: 10px; font-weight: normal; color: #ffffff;">Planet Data sends eDiscovery Best Practice Tips twice a month.
            <br>
            Planet Data Solutions, Inc. 800.688.2812 555 Taxter Rd Elmsford, NY 10523
            </span></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="1px"></td>
            </tr>
           
            <tr>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            <td colspan="4"></td>
            <td width="20px"><img src="http://www.planetds.com/email/images/spacer1x1-blue.gif" width="20px" height="10px"></td>
            </tr>
           
            </table>
           
            <!--End Content-->
           
            </td>
        <td width="33%"></td>
    </tr>
</table>

</body>
</html>

Mathew Mathew, 8 years ago

Hi,

When you are using height and width attributes, you should not have the px unit, so

height="1px" width="20px"

should be

height="1" width="20"

It's possible that could cause the issue. Otherwise, I would suggest not using spacers at all, and simplifying things with a simple structural table and some padding on the cells.


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

Hi, thanks!

I added the spacers as a last resort because the <td> width wasn't holding up in Outlook 07. Losing the "px" helped alot but spawned a new issue...

http://www.geekless.com/clients/pd/outlook2007-screen2.jpg

The middle section has decided to shift 1px to the right

Thank you.

UzE UzE, 8 years ago

Hi,

I would personally code semantically, it seems like you are simply putting text into cells.

By putting paragraphs into <p> tags you can take advantage of the default spacing between each paragraph, then you could style the paragraph or <em> / <strong> tags, this way, at least if your styling fails, you have the defaults to fall back on.

Be sure to keep your tabular outer structure, just code semantically within the cells.

Also I noticed you are using span to style a block of text? <div> should be used for this, as far as I am aware all email clients support <div>

Check out the email standards project for updates on which browsers or email clients support which tags.


:)

Join 150,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