Odd spacing within cells on Outlook and I.E

Afternoon all,

I have been having real problems in trying to get to the bottom as to why there are extra spaces in some nested tables. I'm putting together an offer table for a cruise email and there's extra space in the cells when viewed in Outlook & HotMail. I have been sure to only add the heights to the <td> cells. The problem seems to be in the date part - the 25 is alot lower down on the microsfot versions and I think this is pushing everything else down with it.

Any ideas/help would be greatly appreciated - to save my sanity! :)

Cheers
Jody

How it views in I.E http://fotravel.co.uk/emails/images/travelshops/image-I.E.PNG

How it views in Firefox http://fotravel.co.uk/emails/images/travelshops/image-FF.PNG

<table cellpadding="0" cellspacing="0" align="center"><tr><td width="75">
<table cellpadding="0" cellspacing="0" style="border:solid 1px #666"><tr><td width="75" height="75" valign="top">

<!--Calender blocks-->
<table cellpadding="0" style="vertical-align:top" cellspacing="0"><tr>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
<td width="5" height="10" valign="top" style="background-color:#666"></td>
<td width="5" height="10" valign="top" style="background-color:#fff"></td>
</tr></table>
<!--EndCalender blocks-->

<!--Calender number-->
<table cellpadding="0" style="vertical-align:top" align="center" cellspacing="0"><tr><td width="75" height="45" align="center"><p style="font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:34px; color:#000; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px;"><strong>25</strong></p></td></tr></table>
<!--EndCalender number-->

<table cellpadding="0" style="vertical-align:top" align="center" cellspacing="0"><tr><td width="75" height="20" align="center" style="background-color:#007ac3"><p style="font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:12px; color:#fff; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px;"><strong>August</strong></p></td></tr></table>
</td></tr></table>
</td>

<td width="10"></td>

<!--Cruise details-->
<td width="75" height="75" style="border-left:solid 1px #666; border-top:solid 1px #666; border-bottom:solid 1px #666; background-color:#333" valign="top"><img src="http://www.fotravel.co.uk/emails/images/ncl/ship-epic.jpg" width="75" height="75" alt="epic" /></td><td width="340" valign="top" style="border-top:solid 1px #666; border-bottom:solid 1px #666; border-left: solid 1px #666"><p style="font-family:Verdana, Geneva, sans-serif; line-height:16px; font-size:12px; color:#007ac3; margin: 5px 0px 3px 10px; padding:0px 0px 0px 0px;"><strong>Western Mediterranean aboard the<br />
  Norwegian Epic</strong></p>
  <p style="font-family:Verdana, Geneva, sans-serif; line-height:16px; font-size:12px; color:#007ac3; margin: 5px 0px 3px 10px; padding:0px 0px 0px 0px;">Fly-cruise from London Gatwick, cruise departs Barcelona</p></td>
<!--End Cruise details --> 
  

<!--Price box-->
<td width="100" height="75" valign="top" style="border-left:dashed 1px #007ac3; border-top:solid 1px #666; border-bottom:solid 1px #666; border-right: solid 1px #666 "><table cellpadding="0" cellspacing="0" style="margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px"><tr><td width="100" height="25" style="background-color:#007ac3"><p style="font-family:Verdana, Geneva, sans-serif; line-height:16px; font-size:12px; color:#fff; margin: 0px 0px 0px 5px; padding:0px 0px 0px 0px;"><strong>7nts from</strong></p></td></tr>
<tr><td width="100" height="50"><p style="font-family:Tahoma, Verdana, Geneva, sans-serif; line-height:16px; font-size:34px; color:#007ac3; margin: 10px 0px 0px 5px; padding:0px 0px 0px 0px;"><strong>&pound;907</strong></p></td></tr></table></td>
<!--End Price Box-->



</tr></table>

Cheers
Jody

roshodgekiss roshodgekiss, 4 years ago

Hi Jody, it looks like a combination of 2 things. First of all, Outlook.com doesn't support margin - instead, it applies its own values. Secondly, elements like the calendar on the left are pushing out the height of the design.

So, your best bet here is to:
- Add p { margin: 0; padding: 0; } to the CSS styles in <head> (assuming that your CSS is inlined, inline if not)
- Use cellpadding/spacing on your table cells, instead of margin and padding. It's definitely more reliable.

Thanks, Jody! I hope these are useful tips :) Looking good, though!


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

Hey Ros,

Fantastic advice as ever, certainly very useful tips! Thanks for your help, problem all fixed now :)

Cheers
Jody

roshodgekiss roshodgekiss, 4 years ago

You're very welcome, Jody - always happy to help where we can :)


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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098