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, 3 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, 3 years ago

Hey Ros,

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

Cheers
Jody

roshodgekiss roshodgekiss, 3 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

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