Outlook spacing issue (major cell blowout and/or image blowout)

In outlook this newsletter is taking my bottom ad which is contained in a table and forcing down about 300 pixels. I've tried everything: removing the word "ADVERTISEMENT," nesting tables, not nesting tables, making those table cells a part of the table above, zeroing out tbody, validating my code, forcing a table height on the ad table, trying to force the ad back up by placing content below the ad. Nothing's working, can someone help?

The goal is to have the ad run right below the word "ADVERTISEMENT."

Screenshot:
http://alexrobinsondesign.com/clients/momsteam.png

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>MomsTeam.com | Sports Parenting News &amp; Tips</title>
<style type="text/css">
<!--
body {margin: 0; padding: 0;}
tbody {margin: 0; padding: 0;}
a:link, a:visited {color: #6c8cc7;}
a:hover, a:active {color: #000000;}
.yshortcuts {color: #555555;}
a:link span.yshortcuts, a:visited span.yshortcuts {color: #6c8cc7;}
a:hover span.yshortcuts, a:active span.yshortcuts {color: #000000;}-->
.white a:link span.yshortcuts,.white a:visited span.yshortcuts, .white a:hover span.yshortcuts, .white a:active span.yshortcuts {color: #ffffff;}
.white .yshortcuts {color: #ffffff;}
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
-->
</style>
</head>
<!--template created by Alex Robinson-->
<!--http://www.alexrobinsondesign.com-->
<body text="#555555" link="#6c8cc7" vlink="#6c8cc7" alink="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#555555">
<tr><td height="0" align="center" bgcolor="#000000" style="padding: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;" class="white"><font face="Arial, Helvetica, sans-serif"><webversion style="color: #ffffff;"><font color="#FFFFFF"><b>View Online</b></font></webversion>&nbsp;&nbsp;|&nbsp;&nbsp;<forwardtoafriend style="color: #ffffff;"><font color="#FFFFFF"><b>Send to a Friend</b></font></forwardtoafriend>&nbsp;&nbsp;|&nbsp;&nbsp;<preferences style="color: #ffffff;"><font color="#FFFFFF"><b>Manage Your Subscription</b></font></preferences>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://momsteam.com/contact-us" style="color: #ffffff;"><font color="#FFFFFF"><b>Contact Us</b></font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://momsteam.com" style="color: #ffffff;"><font color="#FFFFFF"><b>Visit MomsTeam</b></font></a></font>
</td></tr>
<tr><td align="center" height="0" bgcolor="#555555">
<table width="840" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" background="images/shad_main.gif">
<table width="800" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr><td align="left" height="0" bgcolor="#FFFFFF">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr><td height="160" align="center" bgcolor="#e1e1e1" background="images/header_grad.gif" style="padding: 30px 0;">
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr><td width="490" height="0"><a href="http://momsteam.com/"><img src="images/logo_tag.gif" alt="MomsTeam.com" width="430" height="119" border="0" style="display: block; margin: 0; padding: 0;" /></a></td>
<td width="250" height="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555; text-shadow: #ffffff 1px 1px 1px;"><img src="images/title.gif" alt="Sports Parenting News &amp; Tips" width="250" height="70" border="0" style="display: block; margin: 0; padding: 0;" />
<font face="Arial, Helvetica, sans-serif" color="#555555"><b>Brooke de Lench,</b> <i>Editor</i></font></td>
</tr>
</table>
</td></tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0"><img src="<$imagesrc link='true' default='images/header_image.jpg'$>" width="800" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" style="padding: 30px;">
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr><td width="490" height="0" align="left" valign="top">
<div>
<repeater toc='true'>
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" style="padding: 0 0 30px 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" style="padding: 0 0 8px 0; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; color: #555555;"><font face="Georgia, Times New Roman, Times, serif" color="#555555"><$title link='true' default='Enter Title Here'$></font></td></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" width="0%" valign="top" style="padding: 0 15px 0 0;"><img src="<$imagesrc link='true' default='images/photo.jpg'$>" width="180" /></td>
<td height="0" width="100%" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555"><$description default='<p>Enter body content here</p>'$></font></td></tr>
</table>
</td></tr>
</table>
</repeater>
<repeater>
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0"><img src="images/cap_460_t.gif" width="460" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
<tr><td height="0" align="center" style="border-left: 1px solid #dadada; border-right: 1px solid #dadada;">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" style="padding: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 14px; text-transform: uppercase; color: #555555;"><font face="Georgia, Times New Roman, Times, serif" color="#555555"><$title link='true' default='Enter Title Here'$></font></td></tr>
<tr><td height="0" style="padding: 15px 0 0 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" width="0%" valign="top" style="padding: 0 15px 0 0;"><img src="<$imagesrc link='true' default='images/photo.jpg'$>" width="180" /></td>
<td height="0" width="100%" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555"><$description default='<p>Enter body content here</p>'$></font></td></tr>
</table>
</td></tr>
</table>
</td></tr>
<tr><td height="0"><img src="images/cap_460_b.gif" width="460" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
</table>
</repeater>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="30">&nbsp;</td></tr>
</table>
<repeater>
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" align="center" style="padding: 0 0 8px 0; font-family: Arial, Helvetica, sans-serif; font-size: 7px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555">ADVERTISEMENT</font></td></tr>
<tr><td height="0"><img src="<$imagesrc link='true' default='images/ad_300x250.jpg'$>" width="300" /></td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>
</td></tr>
</table>
</repeater>
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #555555;">Are you looking to reach our vast audience of sports parents in our newsletter or website? <a href="http://www.momsteam.com/contact/advertising_and_sales/Advertising+and+Sponsorship+Opportunities">Click Here</a> for more information.
</td></tr>
</table>
</div>
</td>
<td width="250" height="0" align="left" valign="top">
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; color: #ec4041;"><font face="Georgia, Times New Roman, Times, serif" color="#ec4041"><b><$title link='true' default='Enter Title Here'$></b></font></td></tr>
<tr><td height="15">&nbsp;</td></tr>
</table>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0"><img src="images/cap_250_t.gif" width="250" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
<tr><td height="0" align="center" style="border-left: 1px solid #dadada; border-right: 1px solid #dadada;">
<table width="190" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" style="padding: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 14px; text-transform: uppercase; color: #555555;"><font face="Georgia, Times New Roman, Times, serif" color="#555555">Connect With Us</font></td></tr>
<tr><td align="center" height="0" style="padding: 15px 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555">
<repeater>
<img src="<$imagesrc link='true' default='images/social_40x40.jpg'$>" width="40" />&nbsp;
</repeater>
</font></td></tr>
</table>
</td></tr>
<tr><td height="0"><img src="images/cap_250_b.gif" width="250" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0"><img src="images/cap_250_t.gif" width="250" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
<tr><td height="0" align="center" style="border-left: 1px solid #dadada; border-right: 1px solid #dadada;">
<table width="190" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" style="padding: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 14px; text-transform: uppercase; color: #555555;"><font face="Georgia, Times New Roman, Times, serif" color="#555555">Video Tips</font></td></tr>
<tr><td align="center" height="0" style="padding: 15px 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555">
<repeater>
<img src="<$imagesrc link='true' default='images/video_190.jpg'$>" width="190" />
<$description default='<p align="center" style="padding-top: 10px;"><b>Enter body content here</b></p>'$>
<br /><br />
</repeater>
</font></td></tr>
</table>
</td></tr>
<tr><td height="0"><img src="images/cap_250_b.gif" width="250" height="20" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>
<repeater>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0" align="center" valign="top" style="padding: 0 0 8px 0; font-family: Arial, Helvetica, sans-serif; font-size: 7px; color: #555555;"><font face="Arial, Helvetica, sans-serif" color="#555555">ADVERTISEMENT</font></td></tr>
<tr><td height="0" align="center" valign="top"><img src="<$imagesrc link='true' default='images/ad_160x600.jpg'$>" width="160" /></td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>
</repeater>
</div>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
<table width="840" height="40" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" background="images/shad_bot.gif">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr><td height="0"><img src="images/cap_main.gif" width="840" height="40" border="0" style="display: block; margin: 0; padding: 0;" /></td></tr>
</table>
</td></tr>
</table>
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="0" style="padding: 15px 0 30px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;" class="white">
MomsTeam is always looking for feedback. What can we do better? How may we help?<br />
Contact Brooke at <a href="mailto:delench@momsteam.com" style="color: #ffffff;"><font color="#FFFFFF"><b>delench@momsteam.com</b></font></a> or the editorial desk at <a href="mailto:editors@momsteam.com" style="color: #ffffff;"><font color="#FFFFFF"><b>editors@momsteam.com</b></font></a><br /><br />

Corporate: Waltham, Massachusetts 02451 | +1 800 474-5201<br />
Mail: 60 Thoreau Street | Suite 288 | Concord, Massachusetts 01742<br /><br />

To safely unsubscribe from this group, <unsubscribe style="color: #ffffff;"><font color="#FFFFFF"><b>click here</b></font></unsubscribe>.<br /><br />

&copy; 2011 <a href="http://momsteam.com/" style="color: #ffffff;"><font color="#FFFFFF"><b>MomsTeam.com</b></font></a>, Inc.
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Howdy, is there a chance you could email this code and images to our support team? I've noticed you're using a div in that right-hand column - try removing that for starters, there may be something going on there, too.


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

Howdy, is there a chance you could email this code and images to our support team? I've noticed you're using a div in that right-hand column - try removing that for starters, there may be something going on there, too.

I was thinking about that after I'd posted. I was scanning your forums looking for the same issue and found one post where a user said that in table columns, if there are nested tables, padding and height will sometimes affect the column beside it. Their solution was to wrap the nested tables that were in the side by side columns in DIVs or SPANs and that would break that relationship. Who knows why OL behaves the way it does so I added these in desperation. So anywho, I've tried without DIVs for the first twelve drafts and brought that in at the last minute.

For now, I removed the word "ADVERTISEMENT" to make it look less awkward. But if you can find something I would be forever grateful!


Alex Robinson Design
hello@alexrobinsondesign.com
www.alexrobinsondesign.com
jimmenycricket jimmenycricket, 5 years ago

Hi Alex,

What is the height of the mailing in pixels?

Outlook is rendered with word and maybe pushing the advert 'onto the next page', this occurs at around 1400 pixels.


Get in touch for any freelance work!

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