Text formatting strange in Outlook 2000

I designed an email template for a client that uses Outlook 2000 and the text and images are formatting very oddly in it. It is wrapping into a long skinny column and aligning to the left with the photo on top of the text. This is one of my repeaters (there are three different repeater layouts in this template).

I'm completely new to developing with tables...I was only about 6 years old when they were the hot stuff. Any help would be greatly appreciated.

<!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>Siskin Email</title>
<style type="text/css">
body {
   background-image: url('images/main_bg.jpg');
   background-repeat: repeat-y no-repeat;
   background-color: #666;
   margin: 0;
   padding: 0;
}

img {
    border: none;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #252525;
    line-height: 20px;
    margin-top:0;

}
h2 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #1e3762;

    margin-bottom:5px;
    font-weight:normal;
    
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #07a186;
    margin-top:0;
    margin-bottom:3px;
    font-weight:normal;
}
img.footer {
    margin-right: 10px;
    margin-top: 5px;
}
a {
    text-decoration: none;
    color: #1e3762;
}
td.teal {
    background-image:url(images/teal_header.jpg);
    background-repeat: no-repeat;
}
td.blue {
    background-image:url(images/blue_header.jpg);
    background-repeat: no-repeat;
}
a.footer {
    color: #FFF;
    text-decoration: none;
}

ul{
            list-style-image:url("images/bullet.jpg");
            list-style-position:inside;
            font-family: Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#252525;
        }
</style>
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" background="images/main_bg.jpg">
<table width="100% "border="0" cellspacing="0" background="images/main_bg.jpg" >
  <tr>
    <td>
    <table width="580" cellspacing="0" cellpadding="0" align="center" border="0">
  <tr>
    <td width="300" style="font-family: Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: 11px; padding-top: 15px" >Siskin Hospital for Physical Rehabilitation<br /> 
<span style="font-style: italic;">Caring People. Changing Lives.</span>
<br /><br />
        <span style="text-decoration:underline; color:#FFFFFF"><webversion style="color:#FFF;">View this in your browser</webversion></span> |  <span style="text-decoration:underline; color:#FFFFFF"><unsubscribe style="color:#FFF;">Unsubscribe instantly</unsubscribe></span></td>
    <td>
    <table width="169" border="0" cellspacing="0" cellpadding="0" align="right">
  <tr>
    <td width="169" height="32" background="images/share_button.png" style="text-align:right;"><forwardtoafriend><img src="images/mail_footer.png" width="23" height="17" alt="foward to a friend" style="margin-right: 15px"/></forwardtoafriend><a href="http://www.facebook.com/pages/Siskin-Hospital-for-Physical-Rehabilitation/91235788782?ref=ts" target="_blank"><img src="images/fb_footer.png" width="10" height="18" style="margin-right: 15px"/></a><a href="http://twitter.com/#!/SiskinHospital" target="_blank"><img src="images/twitter_footer.png" width="14" height="17" style="margin-right: 15px; padding-top: 5px;"/></a></td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/logo.jpg" width="580" height="129" alt="Siskin Hospital for Physical Rehabilitation" /></td>
    </tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="10" height="42" background="images/left_shadow.png">&nbsp;</td>
    <td width="580" height="42" bgcolor="#FFFFFF" background="images/blue_header.jpg" style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:18px; color: #FFFFFF; padding-left: 15px;"><singleline label="Newsletter Title">Enter Title Here</singleline></td>
    <td width="9" height="42" background="images/right_shadow.png">&nbsp;</td>
  </tr>
  <tr>
    <td width="10" height="35" background="images/left_shadow.png">&nbsp;</td>
    <td width="580" height="35" background="images/teal_header.jpg" bgcolor="#FFFFFF" style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:16px; color: #FFFFFF; padding-left: 15px;"><singleline label="Newsletter Subtitle">Enter Subtitle Here</singleline></td>
    <td width="9" height="35" background="images/right_shadow.png">&nbsp;</td>
  </tr>
</table>
  <table width="600" border="0" cellspacing="0" align="center">
  <tr>
    <td width="10" background="images/left_shadow.png">&nbsp;</td>
    <td width="34" bgcolor="#FFFFFF">
    <table width="580" cellspacing="0" cellpadding="0" border="0">
  <tr>
      <td width="100%" height="20"></td>
  </tr>
</table>
<repeater>
<layout label="Main Feature Story">
<table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="34" height="20">&nbsp;</td>
    <td width="512"><img src="images/default_img.jpg" editable="true" width="512"></td>
    <td width="34" height="20">&nbsp;</td>
  </tr>
  <tr>
    <td width="34">&nbsp;</td>
    <td width="512"></td>
    <td width="34">&nbsp;</td>
  </tr>
  <tr>
    <td width="34">&nbsp;</td>
    <td width="512"><h2><singleline label="Article Title">Title of Feature Story</singleline></h2><p><multiline label="Feature Story Text">This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text</multiline></p></td>
    <td width="34">&nbsp;</td>
  </tr>
  <tr>
    <td  width="34" height="15">&nbsp;</td>
    <td width="512" height="15" style="border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:#c6c6c6;">&nbsp;</td>
    <td width="34" height="15">&nbsp;</td>
  </tr>
  <tr>
    <td width="34">&nbsp;</td>
    <td width="512">&nbsp;</td>
    <td width="34">&nbsp;</td>
  </tr>
</table>
</layout><!--End Feature Story -->
<layout label="Photo on left">
<table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="34">&nbsp;</td>
    <td width="512"><img src="images/default_small_img.jpg" align="left" width="242" editable="true"style="margin-right: 10px;" /> <h2><singleline label="Article Title">Title of Article</singleline></h2><h3><singleline label="Subtitle">Subtitle</singleline></h3><p><multiline label="Feature Story Text">This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text</multiline></p></td>
    <td width="34">&nbsp;</td>
  </tr>
  <tr>
    <td width="34" height="15">&nbsp;</td>
    <td width="512" height="15" style="border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:#c6c6c6;">&nbsp;</td>
    <td width="34" height="15">&nbsp;</td>
  </tr>
  <tr>
    <td width="34" height="15">&nbsp;</td>
    <td width="512" height="15">&nbsp;</td>
    <td width="34" height="15">&nbsp;</td>
  </tr>
</table>
</layout><!--End Photo Left Story -->
<layout label="Photo on right">
<table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="34">&nbsp;</td>
    <td width="512"><img src="images/default_small_img.jpg" align="right" width="242" editable="true"style="margin-left: 10px;" /> <h2><singleline label="Article Title">Title of Article</singleline></h2><h3><singleline label="Subtitle">Subtitle</singleline></h3><p><multiline label="Feature Story Text">This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text. This is where you can insert your main feature story text</multiline></p></td>
    <td width="34">&nbsp;</td>
  </tr>
  <tr>
    <td width="34" height="15">&nbsp;</td>
    <td width="512" height="15" style="border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:#c6c6c6;">&nbsp;</td>
    <td width="34" height="15">&nbsp;</td>
  </tr>
  <tr>
    <td width="34" height="15">&nbsp;</td>
    <td width="512" height="15">&nbsp;</td>
    <td width="34" height="15">&nbsp;</td>
  </tr>
</table>
</layout>
</repeater>
</td>
    <td width="10" background="images/right_shadow.png">&nbsp;</td>
  </tr>
</table> <!--End White Box Region -->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
  <td width="9px" background="images/left_shadow.png"></td>
    <td bgcolor="#07a186" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FFFFFF; padding-left: 15px; padding-top: 5px;"><a href="http://siskinrehab.org" target="_blank" class="footer">www.SiskinRehab.org</a></td>
    <td  bgcolor="#07a186" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FFFFFF; padding-bottom: 5px;">SHARE: <forwardtoafriend><img src="images/mail_footer.png" width="23" height="17" alt="forward to a friend" class="footer"/></forwardtoafriend>
    <a href="http://www.facebook.com/pages/Siskin-Hospital-for-Physical-Rehabilitation/91235788782?ref=ts" target="_blank"><img src="images/fb_footer.png" width="10" height="18" alt="facebook" class="footer"/></a>
    <a href="http://twitter.com/#!/SiskinHospital" target="_blank"><img src="images/twitter_footer.png" width="14" height="17" alt="twitter" class="footer"/></a></td>
    <td width="9px" background="images/right_shadow.png"></td>
  </tr>
</table>
<table width="600" cellspacing="0" cellpadding="0" align="center" rules="cols" frame="void">
  <tr height="40" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FFFFFF; text-align:center;">
    <td width="9" background="images/left_shadow.png" style="border-right-color:#003479">&nbsp;</td>
    <td bgcolor="#003479" style="border-right-color:#FFFFFF;"><a href="http://siskinrehab.org/subpage.php?pageId=527" class="footer">Programs &amp; Services</a></td>
    <td bgcolor="#003479" style="border-right-color:#FFFFFF"><a href="http://siskinrehab.org/subpage.php?pageId=490" class="footer" target="_blank" >The Fitness Center</a></td>
    <td bgcolor="#003479" style="border-right-color:#FFFFFF"><a href="http://siskinrehab.org/news.php" class="footer" target="_blank">News &amp; Events</a></td>
    <td bgcolor="#003479" style="border-right-color:#FFFFFF"><a href="http://siskinrehab.org/subpage.php?pageId=505" class="footer" target="_blank">Donations</a></td>
    <td bgcolor="#003479" style="border-right-color:#003479"><a href="http://siskinrehab.org/subpage.php?pageId=566" class="footer" target="_blank">Our Facility</a></td>
    <td width="9" background="images/right_shadow.png">&nbsp;</td>
  </tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color: #FFFFFF; text-align:center; padding-top:7px;">Siskin Hospital for Physical Rehabilitation, One Siskin Plaza, Chattanooga, TN 37403 (423) 634-1200</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  
</table>
</td>
  </tr>
</table> <!--End Main Wrapper Region -->
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi sarah, welcome to the forums. That is very curious, as the code itself looks pretty good, if I say so myself! The issue may be with the align="left" and align="right" not working as it should in Outlook. Perhaps you can try placing the images in their own column, as this will certainly prevent wrapping issues (you can remove the align= then).

If this doesn't help, kindly post a screenshot here and we'll give it our best shot. :)


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