Outlook Issue - Before Images are downloaded first margin column

Hi,

I have an email that I'm trying to troubleshoot.

Issue:

You can not see any of the text before downloading images because the first column (which I am just using for margin) pushes everything in the middle column out off the screen.

Any Help would be great!

Here is my code:

<!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>Thank You For Contacting SunWize </title>

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">



</head>
<body style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#282828;" >
<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #282828;
}
a.link {
    color:#3399CC;
}
table h1 { margin:5px 0px 12px 0px; }
table h2 { margin:0px 0px 6px 0px; }
table h3 { margin:6px 0px 6px 0px; }
table h1,
table h2,
table h3 { padding:0px 0px 0px 0px; }
table p {
    padding:0px 0px 0px 0px;
    line-height:17px;
}
table h3 {
    color:#0064B3;
    font-weight:normal;
    font-style:italic;
}

table p a {
    color:#ff6d16;   
    text-decoration:none;
}

table p a:hover{
    text-decoration:underline;
}

table h4 a {
    color:#366e88;
    text-decoration:none;
}

table h4 a:hover {
    text-decoration:underline;
}

   
table ul.steps {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
   
    }

table li.steps {
    font-weight:bold;
    color:#282828;
    line-height:16px;
}

table li span.steps {
    color:#0064B3;
    font-weight:bold;
    margin-right:18px;

}

span.membertxt {
    padding:4px;
    color:#396b24;
    font-weight:bold;
    font-size:10pt;
}
img.pricetab { padding:4px 0px 4px 4px; }
span.weburl { color:#366e88; }


</style>

<!--Everything Table-->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td><table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#E3E9ED">
            <tr>
                <td>
<!--Top Panel Table-->
                    <table width="700" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="20" valign="top"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/top_left_edge.gif" alt="" /></td>
                                <td width="660" valign="top">
                                    <table width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#fbfbfb">
                                        <tr>
                                            <td width="200" rowspan="2" valign="top"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/logo_head.gif" width="200" height="112" /></td>
                                            <td width="460" valign="top">
                                                <table width="460" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td colspan="5"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/top_edge.gif" alt="" width="460" height="31" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td><a href="http://www.sunwize.com/systems/gallery.php" target="_blank" title="The Club"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/tab_gallery_btn.gif" alt="Solar Gallery" width="86" height="45" border="0" /></a></td>
                                                        <td><a href="http://www.sunwize.com/systems/solar-system-calculator.php" target="_blank" title="Club Offers"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/tab_calculator_btn.gif" alt="Solar Calculator" width="87" height="45" border="0" /></a></td>
                                                        <td><a href="http://www.sunwize.com/news/solar-news-financing.php" target="_blank" title="Refer a Friend"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/tab_financing_btn.gif" alt="Financing" width="153" height="45" border="0" /></a></td>
                                                        <td><img src="http://www.sunwizesystems.com/email/genius_template_07_10/tab_right_new.gif" width="134" height="45" border="0" /></td>
                                                  </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td rowspan="2" valign="top">
                                                <table border="0" cellpadding="0" cellspacing="0" width="460" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#7d7d6b;" >

                                                   
                                                    <tr>
                                                        <td><img src="http://www.sunwizesystems.com/email/genius_template_07_10/top_panel_edge.gif" alt="" /></td>
                                                    </tr>
                                                                                           
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" valign="bottom">&nbsp;</td>
                                        </tr>



<td colspan="2">
<!--Start CONTENT-->

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"></td>
<td>
<h1 style="color:#0064b3;margin-bottom:0px;font-size:12pt;margin-top:5px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" >Congratulations [[FIRSTNAME]] [[LASTNAME]]!</h1>
<h3 style="margin-bottom:30px;">You’ve taken the first step to cleaner energy and lower utility bills. A SunWize Solar Expert will contact you shortly to review your energy needs and goals.</h3>                                                           
<p>For almost 10 years, <a href="http://www.sunwize.com">SunWize Technologies</a> has been helping customers like you go solar. Please be sure to visit our <a href="http://www.sunwize.com/systems/gallery.php">solar gallery</a> for customer testimonials and installation photos in your area. Our knowledgeable Solar Experts guide you every step of the way to ensure a smooth and stress free experience.</p>
                                                                <table>
                                                                <tr>
                                                                <td valign="top">
                                                                <ul class="steps">
                                                                <li class="steps"><span class="steps">Step 1</span> Free Home Solar Assessment</li>
                                                                <li class="steps"><span class="steps">Step 2 </span>Product Selection</li>
                                                                <li class="steps"><span class="steps">Step 3</span> Financing</li>
                                                                <li class="steps"><span class="steps">Step 4</span> Permitting and Installation</li>
                                                                <li class="steps"><span class="steps">Step 5</span> Turn It On!</li>
                                                                </ul>
                                                                </td>
                                                                <td width="50" rowspan="2"></td>
                                                                <td rowspan="2"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/SWInstallers_roof.jpg" width="188" height="255"  hspace="5" vspace="5" border="0" align="right" /></td>
                                                                </tr>
                                                                <tr>
                                                                  <td valign="bottom"><a href="http://sunwize.com/blog" target="_blank"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/txt_link_blog.gif" alt="Installation Blog" width="162" height="16" border="0" /></a> <a href="http://www.sunwize.com/systems/gallery.php" target="_blank" ><img src="http://www.sunwizesystems.com/email/genius_template_07_10/txt_link_gallery.gif" alt="Solar Gallery" width="179" height="16" border="0" /></a></td>
                                                                </tr>
                                                                </table>

<!--END CONTENT TABLE-->
</td>
<td width="20"> </td>
</tr>
</table>

                                                           
                                                        </td>
                                                        </tr>


                                        <tr>
                                            <td colspan="2"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/top_panel_bottom_edge.gif" alt="" width="660" height="20" /></td>
                                        </tr>
                                    </table></td>
                                <td width="20" valign="top"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/top_right_edge.gif" alt="" width="20" height="199" /></td>
                            </tr>
                        </table></td>
                </tr>
                <tr>

                    <td><table width="700" border="0" cellspacing="0" cellpadding="0">
                            <tr><td colspan="5">&nbsp;</td></tr>
                            <tr>
                                <td width="20">&nbsp;</td>
                                <td width="320" valign="middle" align="center"></td>
                                <td width="20">&nbsp;</td>
                                <td width="320" valign="middle" align="center"></td>
                                <td width="20">&nbsp;</td>
                            </tr>

                            <tr><td colspan="5">&nbsp;</td></tr>
                        </table></td>
                </tr>
                <tr>
                    <td><table width="700" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="20">&nbsp;</td>
                                <td width="660">
                                    <table width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#fbfbfb">

                                        <tr>
                                            <td width="430" rowspan="4" valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#7d7d6b;" >
                                                <table width="430" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td colspan="2"><img src="http://i7.cmail1.com/ti/r/44/E8C/F2E/213956/middlepanel_top_edge.gif" alt="" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="20">&nbsp;</td>                                               
                                                        <td width="410" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#7d7d6b;" >

<!--Testimonial Headline-->
<p style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;line-height:17px;" >

<h2 style="color:#9ec049;margin-bottom:3px;text-transform:uppercase;font-size:18pt;margin-top:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" ></h2>                                                       
<!--Testimonial Body-->
<h2 style="color:#282828;padding-bottom:4px; font-size:14px;font-weight:normal;font-style:italic;margin-top:0px;margin-bottom:6px;margin-right:20px;margin-left:0px;padding-top:0px;padding-right:0px;padding-left:0px;" >&quot;Boy are we having fun! We’ve been watching our electric meter run backwards every day. SunWize has  great employees and we will recommend you to our friends.&quot;</h2>                                                           


<!--Testimonial Signature-->
<h3 style="color:#0064B3;font-size:10pt;margin-top:6px;margin-bottom:6px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" >Bill and Debbie<br />
  Studio City, CA
</h3>
</p>
</td>
</tr>
<tr>
<td width="20">&nbsp;</td>   
<td valign="bottom" colspan="2">
<p style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;line-height:17px;" ><!--About SunWize-->                                                           
<h2 style="color:#ffb643;margin-bottom:3px;font-size:18pt;margin-top:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" >About SunWize</h2> 
                                                       


<p style="padding-top:0px;padding-bottom:0px;padding-right:10px;padding-left:0px;line-height:17px;" >Since 2002, SunWize has installed over 30,000 solar panels for residential homes, making us one of the most experienced solar providers in the U.S.  In addition, as a member of the Mitsui family of companies, a global Fortune 150 Company, we are uniquely positioned to offer our customers a financially secure partner who will be able to support the systems we install for the duration of their warranty period and beyond. </p>
</p>
<!--Bottom Space-->                                                           
<p style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;line-height:6px;" >
                                                           

</p>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="230" valign="top"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/middle_panel.gif" alt="" /></td>
                                        </tr>
                                        <tr>
                                            <td style="padding-top:10px;padding-bottom:10px;padding-right:0px;padding-left:0px;" >&nbsp;</td>

                                        </tr>
                                        <tr>
                                            <td valign="bottom"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/bottom_right.jpg" alt="" /></td>
                                        </tr>
                                        <tr>
                                          <td valign="top"><p style="font-style:italic; font-size:11px; line-height:11px; color:#282828; margin-top:3px;">A Southern California home with a SunWize solar power system.</p></td>
                                      </tr>
                                       
                                        <tr>
                                            <td colspan="2" valign="top" bgcolor="#e3f1f3"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/middle_panel_bottom.gif" alt="" /></td>
                                        </tr>
                                    </table>
                              </td>

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

                <tr>
                    <td><table width="700" border="0" cellspacing="0" cellpadding="0">

                            <tr>

                                <td width="20" valign="middle">&nbsp;</td>
                                <td width="660" valign="middle" align="center" style="font-size:12px;" ><img src="http://www.sunwizesystems.com/email/genius_template_07_10/footer.gif" width="186" height="47" alt="LIFE logo" style="padding-top:25px;" />
                                  <h4 style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#366e88;font-size:14pt;font-weight:normal;" ><a href="http://www.sunwize.com">www.sunwize.com</a></h4>
                                    <p style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#366e88;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;line-height:17px;" >SunWize Solar Power Solutions,  (866) 436-7353</p></td>
                                <td width="20" valign="middle">&nbsp;</td>
                            </tr>
                        </table></td>
                </tr>

                <tr>
                    <td valign="bottom"><img src="http://www.sunwizesystems.com/email/genius_template_07_10/footer_edge.gif" alt="" width="700" height="17" /></td>
                </tr>
            </table></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

</body>
</html>

davidaf davidaf, 6 years ago

I'm not able to replicate this issue - when I test in Outlook 07 with blocked images the content isn't pushed over at all. I also tested in an email tester for Outlook03 and Outlook10 and neither behaved that way. Can you confirm which version you are using?


The Campaign Monitor Blog – HTML email smarts to go with your good looks
zapatoche, 6 years ago

Are the dimensions of the images set in the HTML
Could be that Outlook increase the size of the image box to fit the alt attribute when the dimensions are not hardcoded

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