Solution for aligning the header to the top in Outlook 2007/2010.

Below is a simple trick for aligning a header to the top edge of the window in Outlook 2007/2010.  When used in conjunction with backgrounds images, it can easily eliminate that ugly white gap on top of your design.

Here's the baseline code used:

<!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>Outlook 2007/2010 Header Margin Trick</title>
</head>

<body bgcolor="#cbcccd" style="background:#cbcccd; padding:0; margin:0; width:100% !important; display:block !important;">
<!--[if gte mso 9]>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
           <v:fill type="tile" src="http://www.thiespublishing.com/CM/bodybg.gif" />
    </v:background>
<![endif]-->
<!--[if !mso 9]> 
    <div style="background-color:#cbcccd;">
<![endif]-->

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="center" background="http://www.thiespublishing.com/CM/bodybg.gif">
            <table width="600" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="600" height="100" bgcolor="#00a7ab" style="color:#ffffff">
                        <!--[if gte mso 9]>
                            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theBackup" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:115px; width:618px; top:-20px; left:-10;border:0;z-index:1;'>
                            <table width="600" cellpadding="0" cellspacing="0" border="0"><tr><td width="600" height="115" bgcolor="#00a7ab"></td></tr></table>
                            </v:shape>
                            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:115px; width:600px; top:-15px; left:0; border:0; z-index:2;' src="http://www.thiespublishing.com/CM/header.jpg"/>
                            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theContent" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:100px; width:600px; top:-5; left:-10;border:0;z-index:3;'>
                            <div>
                        <![endif]-->
                        <table width="600" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td width="600" height="100"><a href="http://www.campaignmonitor.com"><img src="http://www.thiespublishing.com/CM/original.jpg" width="600" height="100" border="0" style="display:block;" /></a></td>
                            </tr>
                        </table>
                        <!--[if gte mso 9]>
                            </div>
                            </v:shape>
                        <![endif]-->
                    </td>
                </tr>
                <tr>
                    <td width="600" height="300" bgcolor="#ffffff" valign="middle">
                        <div align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:25px; color:#000000;">Outlook 2007/2010 Header Margin Trick</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!--[if !mso 9]> 
</div>
<![endif]-->
</body>
</html>

Please note:
• Requires using a 15px taller header image just for Outlook 2007/2010.  The original image for all other email clients will be 15px less.
• This will not shift the rest of the page up - it simply fills the gap with the taller image.
• A second VML shape is being used (id="theBackup") to produce a back-up background color that aligns to the top edge of the window as well.
• As always with VML objects, the top/left/width/height of each object may need to be adjusted depending on design and layout.


If you have any problems implementing this into your design, I'm available for freelance email coding work.

wilbertheinen wilbertheinen, 5 years ago

Good busy! Let's try it out!


Create a Clang!
wilbertheinen wilbertheinen, 5 years ago

@BThies

Is there a reason for writing the following:

top:-20px; left:-10;

Is -10 the same as -10px?


Create a Clang!
BThies BThies, 5 years ago

Sometimes it is, sometimes it isn't.  It can all depend on the design/layout, and how Outlook determines spacing for that particular object based on surrounding elements.


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