HTML Email - Unwanted Extra Spacing

HTML & CSS
1

Hi,

I have been asked to help a client to build an HTML email. The first thing is that I have for many years now used CSS and tableless design; therefore it was quite a lesson when I went to create this and found that creating html emails goes to away-back scripting methods.

The HTML for the email is laid out in a table. All properties and styles are inline. Hotmail strips most of the css out anyway so there are very few styles.

Below the posted html if viewed in firefox 3.x shows the broken images where images will go. Everything is supposed to line up under the top image; however you can see padding/margin/auto sizing? to the left of the top image.

There is also extra spacing after the image below the left side of the top image. This image is supposed to be width:99px; and height:66px; but is actually spreading to 153px wide, which is pushing the other fields to the right.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ceres</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<style>
    img { display:block; margin:0; padding:0;}
    td {  margin:0; padding:0; }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="576" height="1189" border="1" cellpadding="0" cellspacing="0" align='center'>
  <tr width="576" height="205">
    <td colspan="3"><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_01.jpg" width="576" height="205" alt=""/></td>
  </tr>
  <tr>
    <td  rowspan="2"><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_02.jpg" width="99" height="61" alt=""/></td>
    <td colspan="2" width="395" height="31"><!--<img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_03.jpg" width="327" height="27" alt="">-->
      <p  width="395" height="31"  style="margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size: 20px; color: #e51937; margin-bottom:2px;"> <em>
       <!-- 
        ************************************** 
        BEGIN NAME
         **************************************   
         -->
      <CustomBlock name="letter.intro" title="Personalization">
    <Greeting/>
</CustomBlock>
       <!-- 
        ************************************** 
        END NAME 
         **************************************   
         -->
      
      </em> </p></td>
    <td rowspan="4" width="82" height="985"><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_04.jpg" width="82" height="985" alt=""/></td>
  </tr>
  <tr>
    <td colspan="2" style='width:395px; height:30px'><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_05.jpg" width="395" height="30" alt=""/></td>
  </tr>
  <tr>
    <td rowspan="2" width="153" height="924"><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_06.jpg" width="153" height="924" alt=""/></td>
    <td colspan="2" width="341" height="29">
    <p style="padding:0; margin:0; font-family:Verdana, Geneva, sans-serif; font-size: 13px; color: #231f20; margin-top:4px;"> 
    <!-- 
        ************************************** 
        BEGIN PURL 
         **************************************   
     -->
   <Property name="Subscriber.CustomText1"/><Property name="Subscriber.FirstName"/><Property name="Subscriber.FamilyName"/><Property name="Subscriber.CustomText2"/><Property name="Subscriber.FirstName"/><Property name="Subscriber.FamilyName"/><Property name="Subscriber.CustomText3"/>
     <!-- 
        ************************************** 
        END PURL 
         **************************************   
     -->
    </p>
      <!--<img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_07.jpg" width="343" height="24" alt="">--></td>
  </tr>
  <tr>
    <td colspan="2" width="395" height="30"><img src="http://www.nosite.com/french2_alt/Ceres_Eblast_No3_FR_08.jpg" width="341" height="900" alt=""/></td>
  </tr>
  <!--  <tr>
    <td><img src="http://www.nosite.com/french2_alt/spacer.gif" width="151" height="1" alt=""/></td>
    <td><img src="http://www.nosite.com/french2_alt/spacer.gif" width="16" height="1" alt=""/></td>
    <td><img src="http://www.nosite.com/french2_alt/spacer.gif" width="327" height="1" alt=""/></td>
    <td><img src="http://www.nosite.com/french2_alt/spacer.gif" width="82" height="1" alt=""/></td>
  </tr>-->
</table>
<OpenTracking/>
<!--  Do NOT delete previous line if you want to get statistics on the number of opened emails -->
</body>
</html>

Can you make any suggestions on how to remove this extra spacing?

Your help is appreciated.

Regards,
Steve

2

Try adding border=“0” to your IMG tags…

3

Thanks bluedreamer

This did not work. the layout stays the same.

I can’t figure it out as the image sizes are set to the exact ‘real’ size. No CSS is used for layout. Colspan and Rowspan are used in conjunction with the images to give the layout. The left column and right column naturally contain the centre images, so why is the extra space being added?

Dose the image in the second row to the far left expand to the image size directly below it because of the rowspan=‘2’? This image should be set to rowspan=‘2’ as it spans two rows (as seen by the image and paragraph to its’ left)

Regards,
Steve