SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    HTML Email - Unwanted Extra Spacing

    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 Code:
    <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
    ictus==""

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,402
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Try adding border="0" to your IMG tags...

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    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
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •