Outlook 2007

I've tested my email across all email clients and the only one that is a problem (just happens to be the number one client that our recipients use) is Outlook 2007. It's driving me crazy. I could really use any help from the CM collective.

This is Outlook 2003:
http://www.first-pres.org/images/images_A4951/Outlook2003.png

Outlook 2007:
http://www.first-pres.org/images/images_A4951/Outlook2007.png

This is the source code for the design:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First Presbyterian Church</title>
<style type="text/css" media="screen">
    A {font-size: 14px; color: #004961; text-decoration: none; line-height: 16px; font-family: Verdana;}
    P A {color:#004961;text-decoration:none;font-size:13px;font-family:Verdana;}
    .church P {display: inline;}
</style>
</head>
<body style="margin: 0; padding: 0; text-align: center; background: #e6d9af;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #e6d9af; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;"><tr><td >
    <table cellpadding="0" cellspacing="0" border="0" style="margin: auto; text-align: left; width: 728px;">
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="padding: 22px 0 6px 0;">
                <p style="padding: 0px; margin: 0px; font-size: 14px; color: #004961; line-height: 20px; font-family: Verdana;"><strong style="background: #b6bb9f;">ISSUE DATE:</strong> 
                
                <$currentmonthname$> <$currentday$>, <$currentyear$>
                
                </p>
                <p style="padding: 0px; margin: 0px; font-size: 13px; color: #004961; line-height: 20px; font-family: Verdana;">Email not displaying correctly? 
                
                <a href="http://www.first-pres.org/missions" style="color: #004961; text-decoration: underline;">View it in your browser.</a>
                
                </p>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px;"><img src="images/header.jpg" alt="Missions" style="width: 700px; height: 133px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <table cellpadding="0" cellspacing="0" border="0" style="width: 714px;">
                    <tr>
                        <td valign="top" style="width: 444px;">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
                                    <td style="line-height: 0%; font-size: 1px; padding: 10px 0 20px 22px; background: #fff;"><img src="images/contents.gif" alt="Contents" style="width: 116px; height: 13px; border: none;" /></td>
                                </tr>
                                <tr>
                                    <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
                                    <td style="padding: 0 0 70px 37px; background: #fff;">
                                        <table cellpadding="0" cellspacing="0" border="0" style="width: 372px;">
                                        
                                            <tableofcontents>
                                            <tr>
                                                <td style="line-height: 0%; font-size: 1px; width: 15px;"><img src="images/icon-list.gif" alt="" style="width: 3px; height: 3px; border: none;" /></td>
                                                <td style="border-bottom: 1px solid #b2c8cf; padding: 8px 0;font-size: 14px; color: #004961; text-decoration: none;line-height: 16px; display: block; font-family: Verdana;">
                                                
                                                    <$repeatertitle$>
                                                    
                                                </td>
                                            </tr>
                                            </tableofcontents>
                                            
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        
                                        <repeater toc='true'>
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td colspan="2">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                        <tr>
                                                            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/title-left.gif" alt="" style="width: 14px; height: 44px; border: none;" /></td>
                                                            <td style="background: #d7e2db; padding: 12px 22px;"><h2 style="padding: 0px; margin: 0px; font-size: 16px; color: #004961; line-height: 20px; font-family: Verdana;">
                                                            
                                                            <$title link='false' default='Enter Title Here'$>
                                                            
                                                            </h2></td>
                                                            <td style="line-height: 0%; font-size: 1px; width: 9px;"><img src="images/title-right.gif" alt="" style="width: 9px; height: 44px; border: none;" /></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 1px; height: 14px; border: none;" /></td>
                                                <td style="padding: 10px 0 46px 38px; background: #FFF; font-size: 13px; color: #2e2e2e; font-family: Verdana;">
                                                
                                                <$description default='<p>Enter body content here</p>'$>
                                                
                                                </td>
                                            </tr>
                                        </table>
                                        </repeater>
                                        
                                    </td>
                                </tr>
                            </table>
                        </td>
                        
                        <td valign="top" style="width: 224px; padding: 24px 22px 0 24px; background: #fff;">
                            
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="line-height: 0%; font-size: 1px;">
                                    
                                        <img src="<$imagesrc link='false'$>" width="224" border="0">
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background: #d7e2db; border-bottom: 2px solid #7da08d; padding: 0 12px 57px 8px;">
                                        
                                        <table cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td style="padding: 18px 0 0 0;margin: 0px; font-size: 17px; color: #004961; font-weight: normal; font-family: Verdana;">
                                                    <h2 style="padding: 0px; margin: 0px; font-size: 17px; color: #004961; font-weight: normal; font-family: Verdana;">
                                                    
                                                    <$title link='false' default='Enter your title'$>
                                                    
                                                    </h2>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 12px 0 0 0;margin: 0px; font-size: 13px; color: #2e2e2e; font-family: Verdana;">
                                                    
                                                    <$description default='<p>Enter your description</p>'$>
                                                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 17px 0pt 0pt 36px;margin: 0px; font-size: 13px; color: #2e2e2e; font-family: Verdana;">
                                                    
                                                    <$description default='<p>Enter your signature</p>'$>
                                                    
                                                </td>
                                            </tr>
                                        </table>
                                        
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px; padding-bottom: 27px;"><img src="images/white-corners.gif" alt="" style="width: 700px; height: 10px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px;"><img src="images/dark-corners-top.gif" alt="" style="width: 700px; height: 11px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="background: #b6bb9f; padding: 0 15px 0 20px;margin: 0px; font-size: 14px; color: #535353; line-height: 17px;" class="church">
                <span style="color: #004961; text-transform: uppercase; letter-spacing: 3px; font-size: 15px; font-family: Verdana;">
                
                <$title link='false' default='Enter your title'$>
                
                </span> 
                
                <$description default='<p>Enter your description</p>'$>
                
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px;"><img src="images/dark-corners-bottom.gif" alt="" style="width: 700px; height: 11px; border: none;" /></td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="padding: 30px 0 0 25px;">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-right: 33px;">
                        
                            <preferences style="font-size: 15px; color: #fff; text-decoration: none; font-weight: bold; background: #185869; line-height: 19px; padding: 0 5px; display: block; font-family: Verdana;">Subscribe</preferences>
                            
                        </td>
                        <td style="padding-right: 33px;">
                        
                            <unsubscribe style="font-size: 15px; color: #fff; text-decoration: none; font-weight: bold; background: #185869; line-height: 19px; padding: 0 5px; display: block; font-family: Verdana;">Unsubscribe Me</unsubscribe>
                            
                        </td>
                        <td>
                        
                            <forwardtoafriend style="font-size: 15px; color: #fff; text-decoration: none; font-weight: bold; background: #185869; line-height: 19px; padding: 0 5px; display: block; font-family: Verdana;">Forward to a Friend</forwardtoafriend>
                            
                        </td>
                    </tr>
                </table>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="padding: 18px 22px 0 28px;">
                <p style="padding: 0px; margin: 0px; font-size: 13px; color: #004961; font-family: Verdana;">You are receiving this email because you've been in touch with us lately, joined our mailing list, or a friend/colleague thought it might be of interest to you.</p>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr> 
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="padding: 18px 22px 0 28px;">
                <p style="padding: 0px; margin: 0px; font-size: 13px; color: #004961; font-family: Verdana;">If you have any questions or comments about this email, please contact us at <br /><a href="mailto:FPBlast@first-pres.org" style="color: #004961; text-decoration: underline;">FPBlast@first-pres.org</a></p>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>
        <tr>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
            <td style="padding: 18px 22px 30px 28px;">
                <p style="padding: 0px; margin: 0px; font-size: 13px; color: #004961; font-family: Verdana;">Our address: First Presbyterian Church, 219 E. Bijou, Colorado Springs, CO 80903, 719.884.6108<br />Our website: <a href="http://www.first-pres.org/missions" style="color: #004961; text-decoration: underline;">www.first-pres.org/missions</a></p>
            </td>
            <td style="line-height: 0%; font-size: 1px; width: 14px;"><img src="images/empty.gif" alt="" style="width: 14px; height: 1px; border: none;" /></td>
        </tr>    
            
    </table>
</td></tr></table>
</body>
</html>

Thank You!

BThies BThies, 6 years ago

Off first glance:

• All width's should be specified without using style.  (i.e.  width="300")
• All <table>'s and <td>'s should have an actual width (not just 100% - with the exception of the initial wrapper table)
• All <td>'s in the same <tr> row must have the same top and bottom padding to display correctly in Outlook 2007/2010.
• Use align="center" to center a nested table  (instead of text-align or margin:auto)
• Spacer images are unnecessary
• Text-transform & letter-spacing are not fully compatible
• All colors should use the 6-digit/letter format rather than 3 for full compatibility (i.e. #000000)
• Best way to declare something as a block (other than images which need it) is to place them in a <div>.
• For image tags use width="xxx" height="xxx" border="0" style="display:xxxxxx;".  All images should be set to either display:block or display:inline for best results in FireFox.


Brian Thies
Professional Email Developer
Thies Publishing

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