Outlook 07 Gap at top and bottom of email

Having an annoying issue with outlook 07 (surprise) where it is sticking a gap at the top and bottom of the email and making it look stupid. I have tested in Outlook 03, ie8, ff and chrome and it is fine in them.
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:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PPPS</title>
<style>
body {
    background-image: url('images/bg.jpg');
    background-repeat: repeat-y no-repeat;
    background-color: #848484;
    margin: 0;
    padding: 0;
}

v:* {
    behavior: url(#default#VML);
    display: inline-block;
}

.bodyText {
    font-family: Georgia;
    color: #454545;
}
.bodyTextTitle{
    font-family: Georgia;
    color: #454545;
    font-weight: bold;
    font-style: italic;
    font-size: large;
}
.bodyTextPlacename a:link{
    font-family: Georgia;
    color: #454545;
    font-weight: bold;
    font-style: italic;
    font-size: large;
}

.Footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}
.Unsubscribe {
    font-family: Verdana, Arial, Helvetica, sans-serif
}
</style>

</head>

<body>
<table width="569" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top"><img src="images/header.png" width="569" height="164" alt="PPPS" /></td>
    </tr>
    <tr>
        <td align="center" valign="top"><img src="images/Paper-Top.png" width="569" height="11" alt="Paper Top" /></td>
    </tr>
    <tr>
        <td align="center"><table width="100%" height="1000px" cellpadding="0" cellspacing="0" background="images/Paper-Body.png">
        <!--[if gte vml 1]>
            <v:image style='width: 569px; height: 1300px; position: absolute; top: 0; left: 0; border: 0; z-index: -1;' src="http://dl.dropbox.com/u/9262603/EmailImages/Paper-BodyLong.png" />
        <![endif]-->
            <tr>
                <td align="center" valign="top"><p><img src="Images/Sticker.png" width="190" height="188" alt="Date" /></p>
                    <p>&nbsp;</p>
                    <p><img src="images/Sash-Welly.png" width="547" height="58" alt="Wellington" /></p>
                    <p class="bodyText">&#8212; 25th day of August in the year of 2010 at the &#8212;</p>
                    <p class="bodyTextPlacename"><a href="http://www.sharella.co.nz/location.php">Quality Hotel on Thorndon/Sharella Motor Inn</a></p>
                    <p class="bodyText">&#8212; 10:00am to 4:00pm &#8212;</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Sharella+Motor+Inn,+Wellington&amp;ie=UTF8&amp;ll=-41.280612,174.766731&amp;spn=0.02393,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
                    <p><img src="images/Sash-Chch.png" width="547" height="58" alt="Christchurch" /></p>
                    <p class="bodyText">&#8212; 26th day of August in the year of 2010  at the &#8212;</p>
                    <p class="bodyTextPlacename"><a href="http://www.ichotelsgroup.com/h/d/hi/660/en/hd/chcot">Holiday Inn on Avon</a></p>
                    <p class="bodyText">&#8212; 10:00am to 4:00pm &#8212;</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Holiday+Inn+on+Avon,+christchurch&amp;ie=UTF8&amp;ll=-43.525931,172.645082&amp;spn=0.023088,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
<p><img src="images/Sash-Auck.png" width="547" height="58" alt="Auckland" /></p>
                    <p class="bodyText">&#8212; 31st day of August in the year of 2010  at the &#8212;</p>
                    <p class="bodyTextPlacename"><a href="http://www.alexandrapark.co.nz/">Alexandra Park Function Centre,</a><a href="http://www.alexandrapark.co.nz/assets/sm/upload/08/ws/g9/io/FLOOR PLAN - HOBSON &amp; PRESIDENTS ROOM.pdf"> Hobson Room</a></p>
                    <p class="bodyText">&#8212; 10:00am to 4:30pm &#8212;</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Alexandra+Park+Function+Centre,+Auckland&amp;ie=UTF8&amp;ll=-36.88271,174.788361&amp;spn=0.02547,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
                    <p class="bodyTextTitle">See you there!</p>
                    <br />
                    <p class="Unsubscribe">
                        <unsubscribe>Click here to Unsubscribe</unsubscribe>
                    </p>
                    <p class="Footer">Tuapeka Gold Print<br />
                        t: 03 485 9210 | f: 03 485 9332 | e: <a href="mailto:info@tuapeka.co.nz">info@tuapeka.co.nz</a><br />
                        w: <a href="http://www.pentrends.co.nz">www.pentrends.co.nz</a> | <a href="http://www.promoshop.co.nz">www.promoshop.co.nz</a></p>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
</table>
</body>
</html>

Sorry for the wall of code, here is how it looks in outlook 07:
http://i28.tinypic.com/2qav9zd.png

Thanks to BThies for the table bg hack as well

BThies BThies, 6 years ago

Hi Bullchicken,

The background="" should be used in a <td> (not the table).

<td width="569" height="1300" align="center" background="images/Paper-Body.png">
        <!--[if gte vml 1]>
            <v:image style='width: 569px; height: 1300px; position: absolute; top: 0; left: 0; border: 0; z-index: -1;' src="http://dl.dropbox.com/u/9262603/EmailImages/Paper-BodyLong.png" />
        <![endif]-->
        <table width="569" height="1000" cellpadding="0" cellspacing="0" border="0">

Let me know if that helps.


Brian Thies
Professional Email Developer
Thies Publishing
Bullchicken Bullchicken, 6 years ago

Hi BThies,
Tried that and it still has the gaps.

BThies BThies, 6 years ago

I'll have to take a look at the entire code when I get a chance.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

Without having access to the images, I'm not sure how it's supposed to look.

Give this a try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PPPS</title>
<style>
body {
    background-image: url('images/bg.jpg');
    background-repeat: repeat-y no-repeat;
    background-color: #848484;
    margin: 0;
    padding: 0;
}

v:* {
    behavior: url(#default#VML);
    display: inline-block;
}

.bodyText {
    font-family: Georgia;
    color: #454545;
}
.bodyTextTitle{
    font-family: Georgia;
    color: #454545;
    font-weight: bold;
    font-style: italic;
    font-size: large;
}
.bodyTextPlacename a:link{
    font-family: Georgia;
    color: #454545;
    font-weight: bold;
    font-style: italic;
    font-size: large;
}

.Footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}
.Unsubscribe {
    font-family: Verdana, Arial, Helvetica, sans-serif
}
</style>

</head>

<body background="images/bg.jpg">
<table width="569" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="569" align="center" valign="top"><img src="images/header.png" width="569" height="164" alt="PPPS" /></td>
    </tr>
    <tr>
        <td width="569" align="center" valign="top"><img src="images/Paper-Top.png" width="569" height="11" alt="Paper Top" /></td>
    </tr>
    <tr>
        <td width="569" height="1300" align="center" background="images/Paper-Body.png">
            <!--[if gte mso 9]>
                  <v:image style='width: 569px; height: 1300px; position: absolute; top: 0; left: 0; border: 0; z-index: 1;' src="http://dl.dropbox.com/u/9262603/EmailImages/Paper-BodyLong.png" />
                <v:shape id="theText" style='position:absolute; height:1300; width:569px; padding:0; margin:0; top:-5px; left:-10px; border:0; z-index:100;'>
                <div>
               <![endif]-->
            <table width="569" height="1000" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="569" align="center" valign="top">
                    <p><img src="Images/Sticker.png" width="190" height="188" alt="Date" /></p>
                    <p>&nbsp;</p>
                    <p><img src="images/Sash-Welly.png" width="547" height="58" alt="Wellington" /></p>
                    <p class="bodyText">— 25th day of August in the year of 2010 at the —</p>
                    <p class="bodyTextPlacename"><a href="http://www.sharella.co.nz/location.php">Quality Hotel on Thorndon/Sharella Motor Inn</a></p>
                    <p class="bodyText">— 10:00am to 4:00pm —</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Sharella+Motor+Inn,+Wellington&amp;ie=UTF8&amp;ll=-41.280612,174.766731&amp;spn=0.02393,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
                    <p><img src="images/Sash-Chch.png" width="547" height="58" alt="Christchurch" /></p>
                    <p class="bodyText">— 26th day of August in the year of 2010  at the —</p>
                    <p class="bodyTextPlacename"><a href="http://www.ichotelsgroup.com/h/d/hi/660/en/hd/chcot">Holiday Inn on Avon</a></p>
                    <p class="bodyText">— 10:00am to 4:00pm —</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Holiday+Inn+on+Avon,+christchurch&amp;ie=UTF8&amp;ll=-43.525931,172.645082&amp;spn=0.023088,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
<p><img src="images/Sash-Auck.png" width="547" height="58" alt="Auckland" /></p>
                    <p class="bodyText">— 31st day of August in the year of 2010  at the —</p>
                    <p class="bodyTextPlacename"><a href="http://www.alexandrapark.co.nz/">Alexandra Park Function Centre,</a><a href="http://www.alexandrapark.co.nz/assets/sm/upload/08/ws/g9/io/FLOOR PLAN - HOBSON &amp; PRESIDENTS ROOM.pdf"> Hobson Room</a></p>
                    <p class="bodyText">— 10:00am to 4:30pm —</p>
                    <p><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=Alexandra+Park+Function+Centre,+Auckland&amp;ie=UTF8&amp;ll=-36.88271,174.788361&amp;spn=0.02547,0.040684&amp;z=15&amp;iwloc=A"><img src="images/maps_logo.png" alt="Google Maps Link" width="175" height="40" border="0" /></a></p>
                    <p class="bodyTextTitle">See you there!</p>
                    <br />
                    <p class="Unsubscribe">
                        <unsubscribe>Click here to Unsubscribe</unsubscribe>
                    </p>
                    <p class="Footer">Tuapeka Gold Print<br />
                        t: 03 485 9210 | f: 03 485 9332 | e: <a href="mailto:info@tuapeka.co.nz">info@tuapeka.co.nz</a><br />
                        w: <a href="http://www.pentrends.co.nz">www.pentrends.co.nz</a> | <a href="http://www.promoshop.co.nz">www.promoshop.co.nz</a></p>
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
        </td>
    </tr>
</table>
</body>
</html>

If that doesn't fix what you're seeing, I'll need the images to provide a solution.


Brian Thies
Professional Email Developer
Thies Publishing
Bullchicken Bullchicken, 6 years ago

Hi BThies,
That still didn`t work unfortunately. Here are the images that are in the email. Some of them have changed size slightly from the dimensions in the code I posted (± 1-2 pixels at most) but that shouldn`t effect the email.

BThies BThies, 6 years ago

Haven't forgotten about you - just been extremely busy.  :-)


Brian Thies
Professional Email Developer
Thies Publishing
Bullchicken Bullchicken, 6 years ago

No problem, thanks for helping :)

Bullchicken Bullchicken, 6 years ago

I gave up fighting outlook and modified the header image to have a top on it. I don`t think there is a way around getting outlook to not ignore the margin settings.

God I hate outlook

http://i37.tinypic.com/33uxu80.jpg

tmsgp, 6 years ago

I am having the same problem as you, I need my background image to align perfectly with my content but Outlook 07 pushes the email content down because of that gap at the top and the background image no longer aligns.

The annoying thing is it works in Outlook 03 with the exact same code.

I have looked everywhere for a fix and cannot find one, I hoped this article had the answer. Any help or insight would be greatly appreciated, dont give up.

Thanks

JakobTischler, 5 years ago

Hi all,

has there been a solution to this? I'm basically having the exact same problem (Outlook 2010, but I suppose in that aspect it's the same problem as in version 2007), and I've tried everything with the damn body tag. Margins, paddings, topmargin="0", bottommargin="0" attributes etc., all to no avail. And it's not as if the code gets stripped in the process, when looking at the received mail's source, the inline styles and attributes are all still there.

Also, I'm not only having the gap at the top and bottom, but also at the left and right sides. I'm also very confident it is indeed the body tag, since I applied at background to it that differs from the next table, and it simply shows.

So if anyone has any idea at all what's going on here, help would be very appreciated.
Thanks in advance.

roshodgekiss roshodgekiss, 5 years ago

Hi Jakob, could you kindly post your code here in this thread? We'll see if we can help you out with this.


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

Alright, so the "live" site can be seen here, but I'll also paste the html here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" style="margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Motoscoot NL - Redesign 2011 v02 (BG01)</title>

<style type="text/css" media="screen">
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    background-color:#E9E9E9;
    margin:0;
    padding:0;
    width: 100%;
}

html {
    margin:0; 
    padding:0;
    width:100% !important;
}

body {
    background-image:url("https://www.motoscoot.es/shop/images/newsletter/redesign_2011/ms_bl_topbg_gradient.jpg");
    background-repeat:no-repeat repeat-x;
    background-position:top left;

    background-color:#E9E9E9;
    color:#4D4D4D;
    font-family:Arial, 'Trebuchet MS', Helvetica, sans-serif;
    font-size:12px;
    margin:0; 
    padding:0;
    width:100% !important;
}
/*
#headercell {
    background-image:url("https://www.motoscoot.es/shop/images/newsletter/redesign_2011/ms_bl_topbg_gradient.jpg");
    background-repeat:no-repeat repeat-x;
    background-position:top left;
}
*/
#service_info {
    color:#4D4D4D;
    font-family:Arial, 'Trebuchet MS', Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
}

#service_info a {
    color:#DA4800;
    text-decoration:none;
}
.product, .product-info {
    color:#4D4D4D;
    font-family:Arial, 'Trebuchet MS', Helvetica, sans-serif;
    font-size:12px;
}
p { margin:0; padding:0; }
img { margin:0; padding:0; }
body,td,th { font-family: Arial, "Trebuchet MS", Helvetica, sans-serif; }
</style>
</head>

<body style="color:#4D4D4D; font-family:Arial, 'Trebuchet MS', Helvetica, sans-serif; font-size:12px; margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:0 !important; padding-top:0 !important; padding-right:0 !important; padding-bottom:0 !important; padding-left:0 !important; width:100% !important;" topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<table id="bodytable" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:0 !important; padding-top:0 !important; padding-right:0 !important; padding-bottom:0 !important; padding-left:0 !important;">
<tr>
<td align="center">

<table id="nl_header" width="100%" height="230" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
        <td id="headercell" width="100%" height="230" align="center" background="https://www.motoscoot.es/shop/images/newsletter/redesign_2011/ms_bl_topbg_gradient.jpg">
            <img src="https://www.motoscoot.es/shop/images/newsletter/redesign_2011/ms_nl_mainlogo.jpg" witdth="700" height="230" align="middle" />
        </td>
    </tr>
</table> <!-- #nl_header -->

</td>
</tr>

<tr>
<td bgcolor="#E9E9E9" align="center">

<table id="nl_table" width="700" height="1200" cellpadding="0" cellspacing="0" border="0" bgcolor="#E9E9E9" align="center" style="color:#4D4D4D; font-family:Arial, 'Trebuchet MS', Helvetica, sans-serif; font-size:12px;">

    <tr class="line_seperator">
        <td colspan="3" height="2" width="700">
            <img src="https://www.toptaller.com/TT_Shop/news/redesign_2011/tt_nl_linebreak.jpg" width="700" height="2" alt="" border="0"></td>
    </tr> <!-- .line_seperator -->
    
    <tr>
        <td colspan="3" valign="middle" width="700" height="50" align="center">
            <table cellpadding="0" cellspacing="0" border="0" >
                <tr><td height="7"></td></tr>
                <tr>
                    <td id="service_info" colspan="3" style="color:#4D4D4D; font-size:11px; font-weight:bold;" valign="top">
            En caso de que el Newsletter no se abra bien lo puede <a href="#" target="_blank" title="Motoscoot Newsletter v2 2011" style="color:#DA4800; text-decoration:none;"><webversion>mirar tambi&eacute;n a trav&eacute;s de la web</webversion></a> de Motoscoot.es.<br />

            &iquest;Quiere / no quiere recibir nuestras novedades? Puede <a href="http://www.#.com/newsletter.php" target="_blank" title="suscribirse / darse de baja" style="color:#DA4800; text-decoration:none;"><unsubscribe>suscribirse / darse de baja</unsubscribe></a> en nuestra p&aacute;gina web.
                    </td> <!-- #service_info -->
                </tr>
                <tr><td height="7"></td></tr>
            </table>
        </td>
    </tr>
    
    <tr class="line_seperator">
        <td colspan="3" width="700" height="2">
            <img src="https://www.toptaller.com/TT_Shop/news/redesign_2011/tt_nl_linebreak.jpg" width="700" height="2" alt="" border="0"></td>
    </tr> <!-- .line_seperator -->

    <tr><td colspan="3" width="700" height="30"></td></tr>

    <tr><td width="700" style="font-size:26px; font-weight:bold; padding-top:50px;" align="center">
        <p>REST OF<br />NEWSLETTER CONTENT</p><br /><br /><br /><br />
        <p>REST OF<br />NEWSLETTER CONTENT</p><br /><br /><br /><br />
        <p>REST OF<br />NEWSLETTER CONTENT</p><br /><br /><br /><br />
        <p>REST OF<br />NEWSLETTER CONTENT</p>
    </td></tr>
        
    <tr><td colspan="3" width="700" height="30"></td></tr>

</table> <!-- #nl_table -->
        
</td>
</tr>
</table> <!-- #bodytable -->


</body>
</html>

Oviously this isn't the whole code, I left out the main content, but you get the picture. So, the problem is as follows:
Basically immediately when the body starts I have a td#headercell, which has 100% width, and should sit right at the very top of the site. I gave the cell its own background for gMail and Windows Live Mail purposes, but since Outlook ignores that anyway, in Outlook the cell should be [flex transparent]-[700px wide img]-[flex transparent].
Now here comes in the body: because Outlook doesn't go with the td background, I gave the background (a simple gradient, 205->233, 1px wide) to the body as well. The cell being transparent and at x0,y0 should help.

Well it doesn't.
http://i592.photobucket.com/albums/tt6/JakobTischler/motoscoot/th_outlook_2010_body_padding.jpg

What happens is, the body seems to have a damn padding. The background obviously gets passed, but my padding and margin settings (read: zero, 0, null) are ignored whatsoever. As you can see I tried applying the ZeroMarginPadding to <html>, I tried using body's "topmargin", "leftmargin" etc.
Due to that padding, everything gets pushed down (obviously :) ) and at some parts you can see the body and its background coming through. Usually it should have just been covered with a solid E9E9E9 color by the table coming after the header. Also, due to alignment between the background and the header img, I really need to have no body padding whatsoever.

An uglier but way more colorful showcase, even if unnecessary.

Sorry for the lengthy discourse, and many thanks for any help in advance.
--Jakob

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