Windows live hotmail adding extra height in Firefox

I have an email that works fine in all the email clients I test in apart from Hotmail in Firefox (and other Gecko browsers it seems) which adds 130px to the height of the table. 

Any ideas why this is happening, and what I can do?

Here's my 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" />
<style media="all" type="text/css">
table img {
display:block;
}
</style>
<style media="all" type="text/css">
table {
height:450px;
}
</style>
<title>Birkbeck Open Evening May 2008</title>
</head>

<body>
    <table width="600" height="450" border="0" cellspacing="0" cellpadding="0" style="margin: 0px auto;padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#0099d9;">
  <tr>
    <td rowspan="11" width="190" height="450" style="padding:0;margin:0;background-color:#0099d9;vertical-align:bottom;"><img src="images/susan_haslam_padding.jpg" width="190" height="450" alt="Susan Haslam" /></td>
    <td width="450" height="106" style="padding:0;margin:0;background-color:#0099d9;vertical-align:top;"><img src="images/bbklogo.gif" width="450" height="106" alt="Birkbeck, University of London logo" /></td>
  </tr>
  <tr>
    <td height="60" style="padding:0; margin:0;"><p style="padding:0; margin:0; font-family:Verdana, Arial, Helvetica, sans-serif; color: #ffffff; background-color:#0099d9;font-size: 3em; vertical-align:top; text-align:center;">Open Evening</p></td>
  </tr>
  <tr>
    <td valign="top" height="20" style="padding:0; margin:0;"><img src="images/spacer20x20.gif" width="20" height="20" style="padding:0; margin:0; " alt="" /></td>
  </tr>
  <tr>
    <td valign="top" height="60" style="background-color:#ffffff;padding:5px;margin:0;"><p style="background-color:#ffffff;color: #0099d9; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; padding:0; margin:0;">&quot;Studying part-time at Birkbeck meant I could continue to work full-time&quot;</p><p style="background-color:#ffffff;color: #0099d9; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: .8em; padding:0; margin:0;"><strong>Susan</strong>, BA Humanities</p></td>
  </tr>
  <tr>
    <td valign="top" height="20" style="padding:0; margin:0;"><img src="images/spacer20x20.gif" width="20" height="20" style="padding:0; margin:0;" alt="" /></td>
  </tr>
  <tr>
    <td valign="top"  height="20" style="padding:0; margin:0;"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1.2em; color: #ffffff; padding: 0; margin:0; text-align:left;">Wednesday 7th May 2008, 4 - 7.30 p.m.</p></td>
  </tr>
  <tr>
    <td valign="top" height="20" style="padding:0; margin:0;"><img src="images/spacer20x20.gif" width="20" height="20" style="padding:0; margin:0;" alt="" /></td>
  </tr>
  <tr>
    <td valign="top"  height="20" style="padding:0; margin:0;"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1em; color: #ffffff; padding: 0; margin:0; text-align:left;">Royal National Hotel Bedford Way, London WC1</p></td>
  </tr>
  <tr>
    <td valign="top" height="20" style="padding:0; margin:0;"><img src="images/spacer20x20.gif" width="20" height="20" style="padding:0; margin:0;" alt="" /></td>
  </tr>
  <tr>
    <td height="35" style="padding:0; margin:0;"><a href="http://www.bbk.ac.uk/events/openeve" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1.9em;color: #ffffff; text-align:left; padding:0;margin:0;">Book your place</a></td>
  </tr>
  <tr>
    <td valign="top" height="20" style="padding:0; margin:0;"><img src="images/spacer20x20.gif" width="20" height="20" style="padding:0; margin:0;" alt="" /></td>
  </tr>
</table>
</body>
</html>
JetSetStephen JetSetStephen, 8 years ago

Mmmm, just looking at this very quickly (I haven't tested this or anything), but it could be either as a result of your inclusion of:

table img {
display:block;
}

Or it may have something to do with the fact that all your right column row heights add up to 401px, not 450px.

Try removing the "display:block;" style and / or resizing your row heights and see if that helps?


"Stop getting Bond wrong!"
Naomi, 8 years ago

Hi, thanks for your reply, I have since worked out that the problem was using <p> tags, once I took them out it worked fine in Hotmail on Firefox, and I'm just about to do a final test.  The table img {display:block;} was something I put in to get rid of another problem I have been having, which is a 2px gap under images, and it works so far.

Henry Balogun, 8 years ago

Has anyone notice there is an image rending  issue with Safari (Mac Internet Broswer) on Hotmail Live it seem to have the same Images rending issue as firefox on Hotmail Live, an extra 3 or 2 pixel gap on top of images

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