Outlook 2007 Problem

Hello

I m beginner, and have developed newsletter that works fine in all major email browser except outlook 2007. Images are stretched out and scattered.

Please help me understand whats the problem in this code. :( only not working with outlook

<html>
<head>
<title>Happy Holidays & Receive your Premium Email Newsletter Free</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
    color: #FFFFFF;
    font-family: Calibri;
    font-size: 12px;
}
a:link {
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
}
a:hover {
    color: #FFFFFF;
}
a:active {
    color: #FFFFFF;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Email newsletters - Copy.psd) -->
<table width="800" height="1427" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="14" bgcolor="#002551" style="color: #FFF; text-align: center; font-family: Meiryo; font-size: 14px;">Happy Holidays &amp; Receive your Premium Email Newsletter Free | Try our <webversion>web version</webversion></td>
        <td>
            <img src="images/spacer.gif" width="1" height="51" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/index_02.jpg" width="679" height="1" alt="" style="display:block"></td>
        <td colspan="4" rowspan="3">
            <fblike><img src="images/index_03.jpg" alt="" width="57" height="166" border="0" style="display:block"></fblike></td>
        <td rowspan="19">
            <img src="images/index_04.jpg" width="63" height="1375" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index_05.jpg" width="230" height="1" alt="" style="display:block"></td>
        <td colspan="6" rowspan="2" background="images/index_06.jpg" style="font-family: Meiryo; font-size: 36px;"> Hello [firstname]</td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td rowspan="16">
            <img src="images/index_07.jpg" width="60" height="1333" alt="" style="display:block"></td>
        <td colspan="2">
            <img src="images/index_08.jpg" width="170" height="164" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="164" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="images/index_09.jpg" width="675" height="382" alt="" style="display:block"></td>
        <td rowspan="16">
            <img src="images/index_10.jpg" width="1" height="1209" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="382" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="7" background="images/index_11.jpg" style="font-family: Meiryo; font-size: 12px; text-align: justify;">We want to share with you this message of love and joy! Thank you for being such faithful customers! For your loyalty, we are extending A Premium Email Newsletter Free PSD for download</td>
        <td colspan="4">
            <img src="images/index_12.jpg" width="286" height="74" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="74" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="images/index_13.jpg" width="675" height="23" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11" background="images/index_14.jpg" style="text-align: center; font-family: Meiryo; font-size: 24px; color: #002551;">Now you too can wish your customer with 

          <br>
      Holiday Special Newsletter</td>
        <td>
            <img src="images/spacer.gif" width="1" height="79" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11"><a href="http://vrindaa.com/promotions/holiday/campaign1/"><img src="images/index_15.jpg"  border="0" width="675" height="84" alt="" style="display:block"></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="84" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11" background="images/index_16.jpg" style="text-align: center; font-family: Meiryo;">HTML Version Available with Free 500 Email Credits on us for <br>
      <span style="color: #6D0003; font-weight: bold;">Just    $99</span><br></td>
        <td>
            <img src="images/spacer.gif" width="1" height="71" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="11"><a href="http://vrindaa.com/promotions/holiday/campaign1/"><img src="images/index_17.jpg" alt="" width="675" height="192" border="0" style="display:block"></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="192" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/index_18.jpg" width="382" height="1" alt="" style="display:block"></td>
        <td colspan="3" rowspan="3">
            <fblike><img src="images/index_19.jpg" alt="" width="254" height="51" border="0" style="display:block"></fblike></td>
        <td colspan="2" rowspan="4">
            <img src="images/index_20.jpg" width="39" height="84" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="images/index_21.jpg" width="30" height="263" alt="" style="display:block"></td>
        <td colspan="2">
            <forwardtoafriend><img src="images/index_22.jpg" alt="" width="253" height="48" border="0" style="display:block"></forwardtoafriend></td>
        <td colspan="3" rowspan="3">
            <img src="images/index_23.jpg" width="99" height="83" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="48" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">
            <img src="images/index_24.jpg" width="253" height="36" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="2" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index_25.jpg" width="254" height="33" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="33" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/index_26.jpg" width="95" height="1" alt="" style="display:block"></td>
        <td colspan="5" rowspan="3"><a href="http://vrindaa.com/promotions/holiday/campaign1/"><img src="images/index_27.jpg" alt="" width="262" height="55" border="0" style="display:block"></a></td>
        <td rowspan="4">
            <img src="images/index_28.jpg" width="35" height="180" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="3">
            <tweet><img src="images/index_29.jpg" alt="" width="254" height="51" border="0" style="display:block"></tweet></td>
        <td rowspan="3"><a href="http://www.vrindaa.com"><img src="images/index_30.jpg" alt="" width="94" height="179" border="0" style="display:block"></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="51" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/index_31.jpg" width="254" height="128" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/index_32.jpg" width="262" height="125" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="125" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_33.jpg" width="60" height="40" alt="" style="display:block"></td>
        <td colspan="11" background="images/index_34.jpg"><span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are receiving this email because you are customer or have joined our mailing . To unsubscribe: 
          <unsubscribe>click here</unsubscribe>
      </span>          <unsubscribe></unsubscribe></td>
        <td>
            <img src="images/spacer.gif" width="1" height="40" alt="" style="display:block"></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="60" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="30" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="140" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="113" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="94" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="4" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="7" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="230" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="17" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="4" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="35" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt="" style="display:block"></td>
        <td>
            <img src="images/spacer.gif" width="63" height="1" alt="" style="display:block"></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi vrindaa, welcome to the forums! Two tips:

- apply border="0" to all your images with links applied
- remove height="1427" from the table

Hopefully this will remove most of the errant spaces you're seeing in this design. I'd also like to note that this is a really complex table layout being used here - where possible, try to nest tables to avoid using attributes like colspan="11" as it's very easy to break a design when using many rows/columns in a single table.

Thanks, vrindaa! Let us know how you go.


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