1

I have an eNewsletter I had to code for one of our clients. After coding everything I sent a test through our Constant Contact account. I tested Gmail, Yahoo & Mac Mail and they work fine. When I send it to an Outlook 2013 email it doesn't display correctly. I am using nested tables. The particular spot giving a problem is the table with id="visa". I've also attached a screen shot of how it looks.

When I open the email in Outlook 2013 and click Actions --> edit message I right click the Visa area and choose Table Properties. I notice the preferred width box is black but not checked. If I go to the properties of the top left cell where it says "Transfer Your Balance And.. " and click the Preferred Width box then everything lines up correctly with no space.

Why isn't Outlook 2013 accepting the widths I give in my HTML? What can I do to make this automatic so Outlook recipients will see the newsletter correctly.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">    td img {border-width: 0px;
        display: block;
    }

</style>

</head>
<body bgcolor="#ffffff"> <!-- 'Myriad Pro', Arial,sans-serif; -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="font-family:'Myriad Pro', Arial,sans-serif; border:1px solid black;">

  <tr>
   <td colspan="3" style="vertical-align:top; padding:0;"><a href="https://www.rbfcu.coop/" target="_blank"><img name="index_r1_c1" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/header.jpg" width="600" height="134" border="0" id="index_r1_c1" alt="" /></a></td>
  </tr>
  <tr>
<!--=====================================
== LEFT SIDE RAIL START (nested table)
=========================================-->
    <td width="209" style="vertical-align:top; padding:0; background-color:#e0e6f4;">
        <table border="0" cellpadding="0" cellspacing="0" width="209" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;">
            <tr>
                <td style="vertical-align:top; padding:20px 0 0 0;"><img name="vacation" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/keyboard.jpg" width="209"  border="0" id="vacation" alt="" /></td>
            </tr>
            <tr>
                <td style="vertical-align:top; padding:0;">
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:15px;"><strong>Money Moves To Make<br />
                        This Season</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">As the year starts winding down,<br />
                        here are some smart moves to make<br />
                        with your money to maximize your<br />
                        earnings and save through the<br />
                        winter.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Give Yourself A Checkup</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Use a free online budgeting and<br />
                        money management tool, like the<br />
                        resources on our<a href="http://www.rbfcu.coop/services/financial-services/members-financial-services.html" target="_blank"> Members Financial<br />
                        Services Page</a> or the one on Mint.<br />
                        com to make it easy, or review<br />
                        your credit union statements and<br />
                        check for areas where you may be<br />
                        overspending. Also, review your<br />
                        health care coverage and see if you<br />
                        can save if you change to a different<br />
                        plan during open enrollment.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Prepare For Holiday Spending</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">To avoid one massive bill at the end<br />
                        of the year, start shopping now and<br />
                        finish before things get crazy. Also,<br />
                        paying off your credit card bills every<br />
                        month will help you save on interest<br />
                        charges.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Put More Into<br />
                        Retirement Accounts</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Contribute the maximum amount<br />
                        possible to prepare for the future.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Weatherproof Your Home</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Prepare your home for colder<br />
                        weather by caulking windows,<br />
                        weatherstripping doors, making<br />
                        sure you have enough insulation<br />
                        and getting a tune&#45;up on your<br />
                        heating unit. It could save you tons<br />
                        in heating costs.</p>
                </td>
            </tr>
        </table>
    </td>
   <td width="22" style="vertical-align:top; padding:0;">
       &nbsp;</td>
<!--=====================================
== BODY START (nested table)
=========================================-->
   <td width="369" style="vertical-align:top; padding:0;">
        <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;">
            <tr>
                <td width="369" style="vertical-align:top; padding:0;">
                    <table id="visa" border="0" cellpadding="0" cellspacing="0" width="369" style="width:369px; font-family:Arial,sans-serif; font-size:9px;">
                        <tr>
                            <td width="132" style="vertical-align:top; padding:0; ">
                                <p style="margin:5px 0 0 0; color:#2063af; font-size:12px;"><strong><span style="font-size:13px;">Transfer Your<br />Balance And Save</span><br />
                                    Lower Your Monthly<br />
                                    Credit Card Payment</strong></p>
                            </td>
                            <td width="74" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c2" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c2.jpg" width="74" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c2" alt="" />
                                </p>
                            </td>
                            <td width="163" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c3" alt="" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="vertical-align:top; padding:0;">
                                <p style="margin:5px 0 0 0; line-height:15px;">If you're currently paying too much interest<br />
                                    on your credit card balance, RBFCU can<br />
                                    help lower your monthly payment. Transfer<br />
                                    your high-interest debt from other credit<br />
                                    cards to the Raritan Bay FCU Platinum Visa&reg;<br />
                                    and you could lower the monthly payment<br />
                                    on your existing balance. With no balance<br />
                                    transfer fee and a fixed rate as low as 9.99%<br />
                                    APR* you could save big.
                                </p>
                                <p style="margin:5px 0 0 0;">Other Advantages Include:</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>No annual or balance transfer fees</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>24/7 customer service</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>25-day grace period on new purchases</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Valuable ScoreCard&reg; Rewards Points</p>
                                <p style="margin:5px 0 0 0;">Don't miss this chance to save.</p>
                            </td>
                            <td width="163" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAut_e_NL151_r2_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r2_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r2c3" alt="" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="vertical-align:top; padding:0;">
                                <p style="margin:10px 0 0 0; color:#2063af; font-size:12px;"><strong>Apply Today!</strong></p>
                                <p style="margin:5px 0 0 0;">Apply online today or call (732) 727-3500 ext. 220.</p>
                                <p style="margin:5px 0 10px 0; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rate subject to change without notification. Contact the credit union for complete details. Other rates available based on creditworthiness.</p>
                            </td>
                        </tr>
                    </table>                 
                    
                </td>
            </tr>
            <tr>
                <td style="vertical-align:top; padding:10px 0 0 0; border-top:1px solid #0167b1;">
                    <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif;">
                        <tr>
                            <td width="185" style="vertical-align:top; padding:0; font-size:11px; border-right:1px solid #0167b1;">
                                <img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/chalkboard.jpg" width="185" />
                                <p style="margin:10px 0 0 0; color:#2063af; font-size:15px;"><strong>Take A Deserved Break<br />
                                    With A Teacher Loan</strong></p>
                                <p style="margin:5px 0 0 0;">A Teacher Loan* from Raritan Bay<br />
                                    FCU is perfect for educators, since<br />
                                    you can take two months off of<br />
                                    your payments. Borrow at a low<br />
                                    rate for whatever you need and<br />
                                    don&rsquo;t worry about paying during<br />
                                    the summer break.</p>
                                <p style="margin:5px 0 0 0; color:#2063af; font-size:14px;"><strong>Advantages Include:</strong></p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Low rates</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Auto and signature loans</p>
                                <p style="margin:3px 10px 0 13px;">available</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Make only 10 payments per</p>
                                <p style="margin:3px 10px 0 13px;">year</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Skip two months of loan</p>
                                <p style="margin:3px 10px 0 13px;">payments</p>
                                <p style="margin:5px 0 0 0;">Call us at (732) 727&#45;3500 ext.<br />
                                    220 and ask about our Teacher&rsquo;s<br />
                                    Loan option today.</p>
                                <p style="margin:5px 0 0 0; font-size:8px;">*Qualified borrowers only. Interest will continue<br />
                                    to accumulate on your loan during the months a<br />
                                    payment is not made. Please contact a Credit Union<br />
                                    Representative for rates, terms and conditions.</p>
                            </td>
                            <td width="184" style="vertical-align:top; padding:0; font-size:11px;">
                                <p style="margin:0 0 0 0;"><img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/back_to_class.jpg" width="184" /></p>
                                <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong><span style="font-size:15px;">Head Back To Class With<br />
                                    Everything You Need</span><br />
                                    <em>With A Raritan Bay FCU<br />
                                        <a style="color:#0167b1;" href="http://www.rbfcu.coop/loans/promo-loan.html" target="_blank">Back To School</a> Loan</em></strong></p>
                                <p style="margin:5px 0 0 10px;">It&rsquo;s that time of year again, when<br />
                                    you need to shop for school<br />
                                    supplies, books, clothes, computers<br />
                                    and other items for the upcoming<br />
                                    school year. Raritan Bay FCU makes<br />
                                    it easier for parents and students<br />
                                    with a special low&#45;rate Back to<br />
                                    School Loan.</p>
                                <p style="margin:5px 0 10px 10px; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rates subject to change without notification.</p>
                                <hr style="color:#0167b1; width:170px" />
                                <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong>Holiday Closing</strong></p>
                                <p style="margin:5px 0 0 10px;">Labor Day<br />
                                    Monday, September 7, 2015</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
   </td>
  </tr>
</table>
</body>
</html>
  • I wasn't able to upload an image but where it has the Visa card image it has spacing to the right and bottom. And the text to the left of it is at a narrower width than specified in the td tag. – Richard Johnson Aug 17 '15 at 15:22

1 Answers1

2

As you probably know (since you're using tables), there are a lot of quirks to Outlook. Outlook 2007/2010/2013/2016 (Windows versions) all use the Microsoft Word HTML rendering engine.

Email on Acid is a very useful service for testing email rendering in a wide variety of clients and devices. They also have tips for fixing common bugs in those clients. Check out their free PDF of tips for Outlook (from this blog post).

Of particular note for this issue:

Step 1. Add the border-collapse property to your embedded CSS

Step 2. Zero out the border, cellpadding and cellspacing in each of your table tags. <table border="0" cellpadding="0" cellspacing="0">

Step 3. If you are trying to "right" or "left" align multiple nested tables, the fix is a little more involved.

In this instance, you might see large gaps between your tables. Here are the steps to correct that:

  1. Add a bgcolor to each TD in your aligned table(s) - select the color based on your layout.

  2. Add a 1px border to your aligned table(s) - this should be set to the same color as the td's within it.

  3. Decrease the width of your aligned table(s) by 2px to accommodate for the border.

  4. Wrap the content of the first TD in a paragraph tag. Style that paragraph tag using the following: mso-table-lspace:0;mso-table-rspace:0;

Here is a sample from start to finish:

<style type="text/css">
  table {border-collapse: collapse;}
</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
  <tr> <td>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
      <tr>
        <td bgcolor="#00CC99"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 1</p></td> </tr>
      <tr>
        <td bgcolor="#00CC99">Content in 1</td>
      </tr>
    </table>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
      <tr>
        <td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 2</p></td> </tr>
      <tr>
        <td bgcolor="#33FFFF">Content in 2</td>
      </tr>
    </table>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
      <tr>
        <td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 3</p></td> </tr>
      <tr>
        <td bgcolor="#993366">Content in 3</td>
      </tr>
    </table>
  </td> </tr>
</table>
joanwolk
  • 1,105
  • 1
  • 15
  • 26