help! Outlook is breaking line height, all other email apps ok?

I have coded an email and all seem fine.. gmail, hotmail, yahoo
But outlook render the text without the lineheight please can someone help.

http://www.twistedjunkie.eclipse.co.uk/testfolder/SafeRedirect.png



<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>impulse_versionone</title>

</head>

<body style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;">


<table cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr>
    <td align="center" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" bgcolor="#006cb7" cellpadding="0" width="600">

      <tr>
        <td class="legal" id="start" align="center" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #000000; padding: 5px;" bgcolor="#FFFFFF">Having problems reading this email, View this in your <a href="http://www.addresstobeadded.com" style="color: #000000;">browser</a></td>
      </tr>
      <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_01.gif" height="145" alt="Fosters header" width="600" /></td>
      </tr>
        <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_02.jpg" height="99" align="bottom" alt="crikey" width="600" style="display: block;" /></td>

      </tr>
      <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%">
            <tr valign="top">
              <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="32"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/margin_spacer_32px.gif" height="32" width="32" /></td>
              <td align="center" valign="top" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="310"><span class="price" style="font-size: 72px; font-weight: bold; margin: 0px; line-height: 90%;">£1<img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/spacer_10px.gif" height="10" alt="" width="10" /></span><span class="off" style="font-size: 60px; font-weight: bold; margin: 0px; line-height: 90%;">OFF</span><br />
                <span class="fosters" style="font-size: 42px; font-weight: bold; margin: 0px; line-height: 40px; padding: 0px;">FOSTER'S</span><br />

                <span class="mccoll" style="font-size: 16px; font-weight: normal; margin: 0px; line-height: 20px; padding: 0px;">4 x PINT PACK AT McCOLL'S</span></td>
              <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="258"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/fosters_can_glass.jpg" height="149" align="top" alt="can and glass" width="258" style="display: block;" /></td>
            </tr>
          </table></td>
      </tr>
          <tr>
        <td valign="top" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_04_2.jpg" height="132" align="top" width="600" style="display: block;" /></td>
      </tr>

      <tr>
<!-- Here is the table start for TV and coupon -->
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%">
          <tr>
            <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/plasma_tv.jpg" height="324" alt="Plasma TV" width="232" /></td><!-- Here is the TV image -->
            <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://mss.honeycomb-software.net/imvoucher/voucher.gif?CustomerCode=test&MSG=DEMO&CtcID=123456789" height="324" alt="voucher to print" width="368" /></td><!-- Here is the coupon image -->
          </tr>
        </table><!-- Here is the table end for TV and coupon -->
        </td>

      </tr>
      <tr>
      <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%"><!-- Here is the table for the offers and nearest Mccoll store -->
  <tr>
    <td class="addresstext" background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/TV_bg.jpg" align="center" height="73" style="font-size: 12px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="232">Visit <a href="http://www.fostersoffers.co.uk" style="color: #FFF;">fostersoffers.co.uk</a><br />for your chance to win </td><!-- End of column -->
    <td background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/Address_bg.jpg" align="left" height="73" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="368">
    <table cellspacing="0" border="0" cellpadding="0" width="100%"><!-- Here is the table for the offers and nearest Mccoll store -->

      <tr>
        <td class="addresstext" align="center" valign="bottom" style="font-size: 12px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="337">Your nearest McColl’s store is:<br /><strong style="color: #F9CF2C;">73 Station Road, Letchworth</strong><br /><a href="http://www.addresstobeadded.com" style="color: #FFF;">Find alternative participating stores</a></td>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="32"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/margin_spacer_32px.gif" height="32" width="32" /></td>
      </tr>
    </table><!-- Here is the table for the offers and nearest Mccoll store -->
    </td>
  </tr>

</table><!-- Here is the end of the table for the offers and nearest Mccoll store -->
</td>
      </tr>
      <tr>
        <td class="mainterms" valign="top" style="font-size: 9px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; padding: 10px 10px 5px; text-align: justify;" bgcolor="#006cb7">Voucher Terms and conditions: <strong>TO THE CONSUMER:</strong> This voucher may be used to claim a saving of £1.00 on your next purchase of a 4 x PINT (568ml) pack of FOSTER’S when presented with the product at the checkout - only at participating McCOLL’S. This voucher is valid against the stated product only and no other product. It cannot be redeemed for cash, nor can change be given. Only one voucher may be presented with each product purchased. Customers must be 18 years or over. Bulk vouchers will not be accepted. Photocopies of this voucher and vouchers that are defaced or tampered with are not valid. The Promoter reserves the right to cancel or amend this promotion due to circumstances outside its control. The Promoter is not responsible for any third party acts or omissions. COUPON VALID UNTIL 24th December 2009. PROMOTER: Heineken UK Ltd, 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ.</td>
      </tr>
            <tr>
        <td valign="top" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" bgcolor="#006cb7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/divider.gif" height="16" width="600" style="display: block;" /></td>

      </tr>
      <tr>
        <td class="terms" align="center" valign="top" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; padding: 0px 5px 5px;" bgcolor="#001b3f"><p>Heineken UK Limited. Registered in Scotland. Registered Number: SC65527.<br />
          Registered Office: 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ. FOSTER’S is brewed in the UK.<br />Please enjoy FOSTER'S responsibly. for the facts <a href="http://www.addresstobeadded.com" style="color: #FFF;">drinkaware.co.uk</a>. Over 18s only. Voucher valid to: 24.12.09 .Closing date to win a Plasma TV: 06.01.10 *Terms &amp; Conditions apply – <a href="http://www.addresstobeadded.com" style="color: #FFF;">details</a></p></td>
      </tr>

      <tr>
        <td class="legal" id="footer" align="center" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #000000; padding: 5px;" bgcolor="#FFFFFF">Heineken UK is not responsible for the content of external internet sites | To unsubscribe from this mailing list, <a href="http://www.addresstobeadded.com" style="color: #000000;">click here</a></td>
      </tr>
            <tr>
        <td align="center" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" bgcolor="#001b3f"><span class="clear" style="font-size: 5px; margin: 0; line-height: normal; color: #1E315D; padding: 0;">text</span></td>
      </tr>
      
    </table></td>

  </tr>
</table>

</body>
</html>

link here:
http://www.twistedjunkie.eclipse.co.uk/testfolder/impulse_printable_coupon_016inline.html


Please help...


lister

BThies BThies, 6 years ago

At a quick glance, have you tried using "line-height:18px;" for the 12px font size lines?

Edit: nevermind - just saw where you're experiencing the problem.  I'll take a further look.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

Use this in the section containing that text:

<td align="center" valign="top" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;" width="310"><span class="price" style="font-size:72px; font-weight: bold; margin: 0px; line-height:66px;">£1<img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/spacer_10px.gif" height="10" alt="" width="10" /></span><span class="off" style="font-size: 60px; font-weight: bold; margin: 0px; line-height: 66px;">OFF</span><br />
                <span class="fosters" style="font-size:42px; font-weight: bold; margin: 0px; line-height:40px; padding: 0px;">FOSTER'S</span><br />

                <span class="mccoll" style="font-size:16px; font-weight: normal; margin: 0px; line-height:20px; padding: 0px;">4 x PINT PACK AT McCOLL'S</span></td>

Brian Thies
Professional Email Developer
Thies Publishing
lister, 6 years ago

thanks for that, I'm gonna take a look now, get back to you in a few minutes


lister

lister, 6 years ago

that sort of worked, the problem Im getting now is small hairline gaps where the cans splice. Also some background images are missing at the bottom where the email and address is, Thanks for your help..

<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>impulse_coupon</title>

</head>

<body style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;">


<table cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr>
    <td align="center" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" bgcolor="#006cb7" cellpadding="0" width="600">
      <tr>
        <td class="legal" id="start" align="center" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #000000; padding: 5px;" bgcolor="#FFFFFF">Having problems reading this email, View this in your <a href="http://www.addresstobeadded.com" style="color: #000000;">browser</a></td>
      </tr>
      <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_01.gif" height="145" alt="Fosters header" width="600" /></td>
      </tr>
        <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_02.jpg" height="99" align="bottom" alt="crikey" width="600" style="display: block;" /></td>
      </tr>
      <tr>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%">
            <tr valign="top">
              <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="32"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/margin_spacer_32px.gif" height="32" width="32" /></td>
              <td align="center" valign="top" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;" width="310"><span class="price" style="font-size:72px; font-weight: bold; margin: 0px; line-height:66px;">£1<img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/spacer_10px.gif" height="10" alt="" width="10" /></span><span class="off" style="font-size: 60px; font-weight: bold; margin: 0px; line-height: 66px;">OFF</span><br />
                            <span class="fosters" style="font-size:42px; font-weight: bold; margin: 0px; line-height:40px; padding: 0px;">FOSTER'S</span><br />
<span class="mccoll" style="font-size:16px; font-weight: normal; margin: 0px; line-height:20px; padding: 0px;">4 x PINT PACK AT McCOLL'S</span></td>
              <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="258"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/fosters_can_glass.jpg" height="149" align="top" alt="can and glass" width="258" style="display: block;" /></td>
            </tr>
          </table></td>
      </tr>
          <tr>
        <td valign="top" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_04_2.jpg" height="132" align="top" width="600" style="display: block;" /></td>
      </tr>
      <tr>
<!-- Here is the table start for TV and coupon -->
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%">
          <tr>
            <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/plasma_tv.jpg" height="324" alt="Plasma TV" width="232" /></td><!-- Here is the TV image -->
            <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><img src="http://mss.honeycomb-software.net/imvoucher/voucher.gif?CustomerCode=test&MSG=DEMO&CtcID=123456789" height="324" alt="voucher to print" width="368" /></td><!-- Here is the coupon image -->
          </tr>
        </table><!-- Here is the table end for TV and coupon -->
        </td>
      </tr>
      <tr>
      <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;"><table cellspacing="0" border="0" cellpadding="0" width="100%"><!-- Here is the table for the offers and nearest Mccoll store -->
  <tr>
    <td class="addresstext" background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/TV_bg.jpg" align="center" height="73" style="font-size: 12px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="232">Visit <a href="http://www.fostersoffers.co.uk" style="color: #FFF;">fostersoffers.co.uk</a><br />for your chance to win </td><!-- End of column -->
    <td background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/Address_bg.jpg" align="left" height="73" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="368">
    <table cellspacing="0" border="0" cellpadding="0" width="100%"><!-- Here is the table for the offers and nearest Mccoll store -->
      <tr>
        <td class="addresstext" align="center" valign="bottom" style="font-size: 12px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="337">Your nearest McColl’s store is:<br /><strong style="color: #F9CF2C;">73 Station Road, Letchworth</strong><br /><a href="http://www.addresstobeadded.com" style="color: #FFF;">Find alternative participating stores</a></td>
        <td style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="32"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/margin_spacer_32px.gif" height="32" width="32" /></td>
      </tr>
    </table><!-- Here is the table for the offers and nearest Mccoll store -->
    </td>
  </tr>
</table><!-- Here is the end of the table for the offers and nearest Mccoll store -->
</td>
      </tr>
      <tr>
        <td class="mainterms" valign="top" style="font-size: 9px; line-height: 130%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; padding: 10px 10px 5px; text-align: justify;" bgcolor="#006cb7">Voucher Terms and conditions: <strong>TO THE CONSUMER:</strong> This voucher may be used to claim a saving of £1.00 on your next purchase of a 4 x PINT (568ml) pack of FOSTER’S when presented with the product at the checkout - only at participating McCOLL’S. This voucher is valid against the stated product only and no other product. It cannot be redeemed for cash, nor can change be given. Only one voucher may be presented with each product purchased. Customers must be 18 years or over. Bulk vouchers will not be accepted. Photocopies of this voucher and vouchers that are defaced or tampered with are not valid. The Promoter reserves the right to cancel or amend this promotion due to circumstances outside its control. The Promoter is not responsible for any third party acts or omissions. COUPON VALID UNTIL 24th December 2009. PROMOTER: Heineken UK Ltd, 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ.</td>
      </tr>
            <tr>
        <td valign="top" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" bgcolor="#006cb7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/divider.gif" height="16" width="600" style="display: block;" /></td>
      </tr>
      <tr>
        <td class="terms" align="center" valign="top" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; padding: 0px 5px 5px;" bgcolor="#001b3f"><p>Heineken UK Limited. Registered in Scotland. Registered Number: SC65527.<br />
          Registered Office: 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ. FOSTER’S is brewed in the UK.<br />Please enjoy FOSTER'S responsibly. for the facts <a href="http://www.addresstobeadded.com" style="color: #FFF;">drinkaware.co.uk</a>. Over 18s only. Voucher valid to: 24.12.09 .Closing date to win a Plasma TV: 06.01.10 *Terms &amp; Conditions apply – <a href="http://www.addresstobeadded.com" style="color: #FFF;">details</a></p></td>
      </tr>
      <tr>
        <td class="legal" id="footer" align="center" style="font-size: 9px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #000000; padding: 5px;" bgcolor="#FFFFFF">Heineken UK is not responsible for the content of external internet sites | To unsubscribe from this mailing list, <a href="http://www.addresstobeadded.com" style="color: #000000;">click here</a></td>
      </tr>
            <tr>
        <td align="center" style="font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" bgcolor="#001b3f"><span class="clear" style="font-size: 5px; margin: 0; line-height: normal; color: #1E315D; padding: 0;">text</span></td>
      </tr>
      
    </table></td>
  </tr>
</table>

</body>
</html>

screen shot:
http://www.twistedjunkie.eclipse.co.uk/testfolder/top.jpg
http://www.twistedjunkie.eclipse.co.uk/testfolder/bottom.jpg


lister

BThies BThies, 6 years ago

Looks to me like Outlook 2007 is ignoring the line-heights that are less than the normal height of the font.  I'll keep working on a fix.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

This is about as good as I can get it (with the time I have) so there are no breaks.  Large fonts and line heights are always tricky, and Outlook 2007 will probably not display the same as the others.  Also, background images are not supported in all e-mail clients.

(Recoded):

<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>impulse_coupon</title>

</head>

<body>
<table align="center" width="600" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td valign="middle" bgcolor="#FFFFFF">
             <div style="font-size:6px;">&nbsp;</div>
             <div align="center" style="font-size:9px; font-family:Arial, Helvetica, sans-serif; color:#000000;">Having problems reading this email, View this in your <a href="http://www.addresstobeadded.com" style="color: #000000;">browser</a></div>
            <div style="font-size:6px;">&nbsp;</div>
        </td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_01.gif" height="145" alt="Fosters header" width="600" style="display:block;" /></td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_02.jpg" height="99" align="bottom" alt="crikey" width="600" style="display:block;" /></td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="32">&nbsp;</td>
            <td width="310" valign="top"><table width="310" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="135" valign="bottom">
                         <div align="right" style="font-size:66px; line-height:60px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;"><strong>£1</strong></div>
                  </td>
                      <td width="10">&nbsp;</td>
                    <td width="165" valign="bottom"><div align="left" style="font-size:52px; line-height:48px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;"><strong>OFF</strong></div>
                     </td>
              </tr>
                <tr>
                    <td colspan="3" valign="top">
                        <div align="center" style="font-size:40px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;"><strong>FOSTER'S</strong></div>
                        <div align="center" style="font-size:16px; line-height:20px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;">4 x PINT PACK AT McCOLL'S</div>                     </td>
              </tr>
            </table></td>
            <td width="258"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/fosters_can_glass.jpg" height="149" align="top" alt="can and glass" width="258" style="display:block;" /></td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td width="600" bgcolor="#006CB7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/SCL-85-Printable-Coupon-Email2.1_04_2.jpg" height="132" align="top" width="600" style="display:block;" /></td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="232"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/plasma_tv.jpg" height="324" alt="Plasma TV" width="232" style="display:block;" /></td>
            <td width="368"><img src="http://mss.honeycomb-software.net/imvoucher/voucher.gif?CustomerCode=test&MSG=DEMO&CtcID=123456789" height="324" alt="voucher to print" width="368" style="display:block;" /></td>
          </tr>
        </table></td>
    </tr>  
    <tr>
        <td><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="232" valign="middle" background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/TV_bg.jpg" bgcolor="#006CB7">
                <div align="center" style="font-size:12px; line-height:16px; font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;">Visit <a href="http://www.fostersoffers.co.uk" style="color:#FFFFFF;">fostersoffers.co.uk</a><br />for your chance to win</div>
            </td>
            <td width="336" valign="middle" background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/Address_bg.jpg" bgcolor="#006CB7">
                <div style="font-size:8px;">&nbsp;</div>
                <div align="center" style="font-size:12px; line-height:16px; font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;">Your nearest McColl’s store is:<br /><strong style="color: #F9CF2C;">73 Station Road, Letchworth</strong><br /><a href="http://www.addresstobeadded.com" style="color: #FFF;">Find alternative participating stores</a></div>
                <div style="font-size:10px;">&nbsp;</div>                
            </td>
            <td width="32" bgcolor="#006CB7">&nbsp;</td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><table align="center" width="580" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
                <div style="font-size:6px;">&nbsp;</div>
                <div style="font-size:9px; line-height:12px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: justify;">Voucher Terms and conditions: <strong>TO THE CONSUMER:</strong> This voucher may be used to claim a saving of £1.00 on your next purchase of a 4 x PINT (568ml) pack of FOSTER’S when presented with the product at the checkout - only at participating McCOLL’S. This voucher is valid against the stated product only and no other product. It cannot be redeemed for cash, nor can change be given. Only one voucher may be presented with each product purchased. Customers must be 18 years or over. Bulk vouchers will not be accepted. Photocopies of this voucher and vouchers that are defaced or tampered with are not valid. The Promoter reserves the right to cancel or amend this promotion due to circumstances outside its control. The Promoter is not responsible for any third party acts or omissions. COUPON VALID UNTIL 24th December 2009. PROMOTER: Heineken UK Ltd, 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ.</div>
                <div style="font-size:6px;">&nbsp;</div>
            </td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td bgcolor="#006CB7"><img src="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/divider.gif" height="16" width="600" style="display:block;" /></td>
    </tr>
    <tr>
        <td bgcolor="#001B3F"><table align="center" width="580" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
                <div style="font-size:8px;">&nbsp;</div>
                <div align="center" style="font-size:9px; line-height:14px; font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;">Heineken UK Limited. Registered in Scotland. Registered Number: SC65527.<br />
          Registered Office: 2-4 South Gyle Broadway, Edinburgh, EH12 9JZ. FOSTER’S is brewed in the UK.<br />Please enjoy FOSTER'S responsibly. for the facts <a href="http://www.addresstobeadded.com" style="color:#FFFFFF;">drinkaware.co.uk</a>. Over 18s only. Voucher valid to: 24.12.09 .Closing date to win a Plasma TV: 06.01.10 *Terms &amp; Conditions apply – <a href="http://www.addresstobeadded.com" style="color: #FFFFFF;">details</a></div>
                <div style="font-size:10px;">&nbsp;</div>
            </td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td align="center" bgcolor="#FFFFFF">
            <div style="font-size:5px;">&nbsp;</div>
            <div style="font-size:9px; line-height:14px; font-family:Arial, Helvetica, sans-serif; color:#000000;">Heineken UK is not responsible for the content of external internet sites | To unsubscribe from this mailing list, <a href="http://www.addresstobeadded.com" style="color:#000000;">click here</a></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#001b3f">
            <div style="font-size:5px;">&nbsp;</div>
        </td>
    </tr>                              
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
lister, 6 years ago

wow, thanks for your help, I noticed you have used divs for positioning, will this be ok? What are the benefits of using divs like this..?

Thanks again..


lister

BThies BThies, 6 years ago

You're very welcome.

<DIV>'s are universally supported, and easy to adjust in height by using font-sizes.  It better ensures the height will be where you want it, as padding, margin and height are not always guaranteed.

They also work much better than using <P>'s, as each e-mail client tends to display a paragraph slightly different depending on what's surrounding it and what margin/padding is set at.

So for creating spacing and lines of text, I always use <DIV>'s.


Brian Thies
Professional Email Developer
Thies Publishing
peter_pearson, 6 years ago
BThies :

Looks to me like Outlook 2007 is ignoring the line-heights that are less than the normal height of the font.  I'll keep working on a fix.

I've just been kicking Outlook 2007 for the exact same reason, after much screaming it seems using percentage line heights will allow you to go lower than the height of the font. So 80% on a 64px font will allow you to close up what would usually be a very large space.

Hope this helps somebody.

krumme, 6 years ago
peter_pearson :
BThies :

Looks to me like Outlook 2007 is ignoring the line-heights that are less than the normal height of the font.  I'll keep working on a fix.

I've just been kicking Outlook 2007 for the exact same reason, after much screaming it seems using percentage line heights will allow you to go lower than the height of the font. So 80% on a 64px font will allow you to close up what would usually be a very large space.

Hope this helps somebody.

This helped me to avoid murdering my office-mates.  Thank you for this fix, it was a very annoying problem.

BThies BThies, 6 years ago

Keep in mind that using a % line height will cut off the bottoms of letters like "g" and "p" in many e-mail clients depending on what % is used.  Anything below 80% will begin to cut off the top and bottom of any letter in Outlook 2007.  Outlook 2007 also vertically aligns text different within a line than other e-mail clients.

Bottom line, it won't display the same across all e-mail clients, so I wouldn't recommend it.


Brian Thies
Professional Email Developer
Thies Publishing
Mathew Mathew, 6 years ago

Great thread! It shows how tricky it can be. One thing to keep in mind is that most recipients will only ever see your email in one email client, so as long as each one individually looks decent, they are unlikely to think of it as 'broken'.

As designers when we compare them (or for our clients) the differences can seem huge, but recipients are not making those comparison.


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