Breaking up in Outlook 2007 - can't figure out why

Hi there...new member here and praying you can help.

I've created an email using Photoshop slices and BASIC HTML. It works fine in everything but...no surprise...Outlook 2007 (in works fine in Outlook 2003?).

I know most of the 2007 quirks and this email is as basicly laid out as it comes, so I can't figure out why the table is falling apart.

Any ideas???? Please help...

In Gmail:
http://rachel.arottalove.org/email_testing/07_Issues/Gmail.jpg

Outlook 2007
http://rachel.arottalove.org/email_testing/07_Issues/Outlook%202007.jpg

<html>
<head>
<title>13182_NewBaby_email_102009</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td colspan="8" width="650">&nbsp;
            </td>
    </tr>
    <tr>
        <td colspan="4"><img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_01.jpg" width="346" height="90"></td>
        <td colspan="4" rowspan="3">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_02.png" width="304" height="226" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_03.jpg" width="47" height="100" ></td>
        <td colspan="3"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:5c707c; font-size:24px; font-weight:bold; line-height:120%;">We hope you and your baby are <br>
          happy and healthy</p></td>
  </tr>
    <tr>
        <td colspan="4">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_05.jpg" width="346" height="36" ></td>
    </tr>
    <tr>
        <td colspan="8" bgcolor="e21350"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:18px; font-weight:bold; line-height:120%; margin-left:50px; margin-top:10px; margin-bottom:10px;">With all the things you have to do,<br>we can help you with one of them.</p></td>
  </tr>
    <tr>
        <td colspan="8">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_07.jpg" width="650" height="19" ></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_08.jpg" width="59" height="114" ></td>
        <td colspan="5">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_09.jpg" width="521" height="1" ></td>
        <td rowspan="2">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_10.jpg" width="70" height="114" ></td>
    </tr>
    <tr>
        <td colspan="5"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:5c707c; font-size:12px; line-height:130%;">If you need to find a new family practice doctor or pediatrician, UnitedHealthcare offers a convenient way to help. The XXX&reg; program recognizes doctores who provide quality and cost-efficient care, to help you choose with confidence. You can find XXX Premium physicians at XXX.com/newbaby. Just look for the stars.</p></td>
  </tr>
    <tr>
        <td colspan="8">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_12.jpg" width="650" height="48" ></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_13.jpg" width="87" height="124" ></td>
        <td colspan="3"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:e21350; font-size:14px; font-weight: bold;">Be one of five to win a $100<br>Babies&quot;R&quot;Us&reg; gift card.</p>
                        <p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:5c707c; font-size:12px; line-height:130%;"> Visit XXX.com/newbaby to find two-star doctors near you and enter to be one of five winers of a $100 Babies"R"Us&reg; gift card.</p></td>
  <td colspan="2">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_15.jpg" width="218" height="124" ></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_16.jpg" width="650" height="24" ></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_17.jpg" width="59" height="43" ></td>
        <td colspan="3"><p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:5c707c; font-size:10px; line-height:130%; margin-left:5px;">For complete rules and regulations around the sweepstakes, please visit XXX.com/babysweepstakes.</p></td>
  <td colspan="3">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_19.jpg" width="241" height="43" ></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/NewBaby_20.jpg" width="650" height="117" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="47" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="12" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="28" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="259" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="63" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="23" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="148" height="1" ></td>
        <td>
            <img src="http://rachel.arottalove.org/email_testing/XXX/Baby/images/spacer.gif" width="70" height="1" ></td>
    </tr>
</table>
</body>
</html>
supernath, 7 years ago

I am just heading out of the office, but after a quick glance, the first think I would try is defining widths for all the td elements, and making sure all of the width math ads up. Also be on the lookout for align and valign settings for the td elements as well.

supernath

BThies BThies, 7 years ago

Hi Rottie_Grrrl,

For this design, nested tables work much better rather than using a large number of colspans and rowspans that can cause breaks.

Please use the following instead (recoded and fully tested):

<!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" />
<title>13182_NewBaby_email_102009</title>
</head>

<body>
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="2"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_01.jpg" width="346" height="90" style="display:block;" /></td>
          <td width="304" rowspan="3"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_02.png" width="304" height="226" style="display:block;" /></td>
        </tr>
        <tr>
          <td width="47"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_03.jpg" width="47" height="100" style="display:block;" /></td>
          <td width="299"><div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:24px; font-weight:bold;">We hope you and</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:24px; font-weight:bold; line-height:120%;">your baby are</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:24px; font-weight:bold; line-height:120%;">happy and healthy</div></td>
        </tr>
        <tr>
          <td colspan="2"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_05.jpg" width="346" height="36" style="display:block;" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="650"><table width="650" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="50" bgcolor="#e21350">&nbsp;</td>
          <td width="450" bgcolor="#e21350"><div style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:6px;">&nbsp;</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:18px; font-weight:bold; line-height:130%;">With all the things you have to do,</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:18px; font-weight:bold; line-height:130%;">we can help you with one of them.</div>
            <div style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:6px;">&nbsp;</div></td>
          <td width="150" bgcolor="#e21350">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="3"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_07.jpg" width="650" height="19" style="display:block;" /></td>
        </tr>
        <tr>
          <td width="59"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_08.jpg" width="59" height="114" style="display:block;" /></td>
          <td width="521"><div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:12px; line-height:130%;">If you need to find a new family practice doctor or pediatrician, UnitedHealthcare offers a convenient way to help. The UnitedHealth Premium&reg; program recognizes doctores who provide quality and cost-efficient care, to help you choose with confidence. You can find UnitedHealth Premium physicians at MyChoiceNotChance.com/newbaby. Just look for the stars.</div></td>
          <td width="70"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_10.jpg" width="70" height="114" style="display:block;" /></td>
        </tr>
        <tr>
          <td colspan="3"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_12.jpg" width="650" height="48" style="display:block;" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="87"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_13.jpg" width="87" height="124" style="display:block;" /></td>
          <td width="345"><div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#e21350; font-size:14px; font-weight:bold;">Be one of five to win a $100</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#e21350; font-size:14px; font-weight:bold;">Babies&quot;R&quot;Us&reg; gift card.</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#e21350; font-size:14px; font-weight:bold;">&nbsp;</div>
            <div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:12px; line-height:130%;">Visit MyChoiceNotChance.com/newbaby to find two-star doctors near you and enter to be one of five winers of a $100 Babies&quot;R&quot;Us&reg; gift card.</div></td>
          <td width="218"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_15.jpg" width="218" height="124" style="display:block;" /></td>
        </tr>
        <tr>
          <td colspan="3"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_16.jpg" width="650" height="24" style="display:block;" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="59"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_17.jpg" width="59" height="43" style="display:block;" /></td>
          <td width="350"><table align="right" width="345" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td><div align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#5c707c; font-size:10px; line-height:130%;">For complete rules and regulations around the sweepstakes, please visit MyChoiceNotChance.com/babysweepstakes.</div></td>
              </tr>
            </table></td>
          <td width="241"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_19.jpg" width="241" height="43" style="display:block;" /></td>
        </tr>
        <tr>
          <td colspan="3"><img src="http://rachel.arottalove.org/email_testing/UHG/Baby/images/NewBaby_20.jpg" width="650" height="117" style="display:block;" /></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Also be aware of the following:
- Lotus Notes 6.5 & 7 won't play well with PNG's.  Best to use GIF's and JPG's.
- When defining colors, make sure to use "#"  (example:  style="color:#000000")
- When using quotes, be sure to use &quot; in your code


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

BTW - you're hitting some spam filters due to the size of your font.  Best to keep it at 18px max.


Brian Thies
Professional Email Developer
Thies Publishing
Rottie_Grrrl, 7 years ago

Wow...THANK YOU!!!!

I wish there was a way to send chocolate through the forum....

(off to become much more versed in nested tables...)

THANK YOU!!

Rottie_Grrrl, 7 years ago

This has worked great...this was the first of a series, so I've been able to whip together the others pretty smoothly. Thank you.

Question though on two tags if you don't mind:

1. Why the style="display:block; in the img tag

2. Why div's vs. p tags?

BThies BThies, 7 years ago

You're very welcome :-)

To answer your questions:

1.) Without style="display:block", Gmail and Hotmail in FireFox can cause white line breaks in the layout.
2.) I've found that the spacing before and after a <p> can vary depending on the e-mail client.  <div>'s allow greater control of the spacing and the size of the spacing.


Brian Thies
Professional Email Developer
Thies Publishing

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