HTML Email not displaying correctly in Outlook 2007

Question

After a lot of time I put into researching. I still can't find an answer.

I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.html and here is a screenshot of how it looks in Outlook 2007:

The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" colspan="3" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td><table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
                <tr>
                  <td width="28"></td>
                  <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
                      </tr>
                      <tr align="right">
                        <td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table></td>
                  <td width="28"></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
          </tr>
        </table></td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

  <!--Testimonial End--> 

  <!--Footer-->

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575"><table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;"><a href="mailto:[email protected]" style="color:#000000; text-decoration:none;">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477</td>
            <td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter &amp; YouTube</td>
            <td valign="middle" width="102"><a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /></a><a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></a></td>
          </tr>
        </table></td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

  <!--Footer End--> 

The width of the containing table is suppose to be 625px. Any help is appreciated.

Answer 1

oh the joy of html emails

There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!

Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.

Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html

Simply put, I do not envy you :)

I found the best way to help me out with my email troubles was to follow the following rules:

1. Never use colspans or rowspans.
2. Always set correct dimensions for your tables and cells.
3. Use spacer gifs rather than &nbps;.
4. Always specify correct image sizes and never scale images up or down.
5. Always add style="display:block;" to images.
6. Avoid using divs.
7. If you wish to colour links, put the styling on a span as a child inside the a tag.
8. Don't use italics.
9. Don't use BRs for layout, always use tables.
10. Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).

Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:

http://pastie.org/6250834

The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:

1. There is an outer wrapping table that has width="100%" set, used to centre the actual email content.
2. or... there is an outer element (a table or div) that has the id="base".

I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).

So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...

Hope it helps.

Answer 2

Try this for your top table:

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">

        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
            </td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="575">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="28">
                  </td>
                  <td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
                        </td>
                      </tr>
                      <tr align="right">
                        <td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table>
                  </td>
                  <td width="28">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
            </td>
          </tr>
        </table>

      </td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

and this for your bottom:

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
              <a href="mailto:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477
            </td>
            <td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
              Follow us on Twitter &amp; YouTube
            </td>
            <td valign="middle" width="49">
              <a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" /></a>
            </td>
            <td valign="middle" width="53">
              <a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" /></a>
            </td>
          </tr>
        </table>
      </td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...