Editing CM's Helvetica theme and I've broken it

I've added in a header banner, some social media icons in the footer and some additional buttons on the right side bar and somehow I've popped out of the 600px width but can't find where the problem is. Any advice on how to troubleshoot this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Crystal Ball's Predictions</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
a:link {
color:#2777e9;
}
a:hover {
color: #59b8cc;
}
.content h2{ font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572 !important; letter-spacing: -2px; line-height: 110%;}
.address p{ font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #767572; margin: 0; padding: 0; letter-spacing: -0.3px; }
  </style>
</head>
<body leftmargin="0" topmargin="0"
 style="background-color: #f1f1f1;" marginheight="0"
 marginwidth="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  
    <tr>
      <td bgcolor="#ffffff" valign="top">
      <table style="font-family: Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-size-adjust: none; color: #999999; line-height: 100%;"
 align="center" border="0" cellpadding="0" cellspacing="0" width="600px;">
        
          <tr>
            <td colspan="3">
            <table style="width: 600px; height: 150px;" border="0" cellpadding="0" cellspacing="0">
              
                <tr>
                  <td style="height: 45px;">
                   <table border="0" cellpadding="10" cellspacing="0" width="100%">
                    
                      <tr>
                        <td style="font-family: Helvetica,Arial,sans-serif; font-size: 11px; color: #999999; padding-top: 15px;">
                        <singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline>
                        <br>
            Having trouble reading this mail? <webversion style="color:#2777e9;">View it in your browser</webversion>.
            Not interested anymore? <unsubscribe style="color:#2777e9;">Unsubscribe</unsubscribe></td>
                      </tr>
                    
                   </table>
        </td>
            <td style="height: 56px;"><img src="images/arrow.gif" width="96" height="56" alt="" style="display: block;" /></td>
                  </td>
                </tr>
                <tr>
                  <td colspan="1" style="background-image: url(images/header_top_separator.gif); background-repeat: no-repeat; height: 7px;">
            <img src="images/header_top_separator.gif" alt="" style="display: block;" height="7" width="600">
          </td>
                </tr>
                <tr>
                  <td valign="top">
            <img style="width: 600px; height: 326px;" alt="Predictions Header" src="images/1107headerv2.jpg">
                  </td>
                </tr>
                <tr>
                  <td colspan="1" style="height: 16px; background-image: url(images/header_border.gif); background-repeat: no-repeat;" valign="top"><img style="width: 600px; height: 16px;" alt="header border" src="images/header_border.gif"></td>
                </tr>
              
            </table>
            </td>
          </tr>
          <tr>
            <td bgcolor="#ffffff" valign="top" width="398">
            <table border="0" cellpadding="0" cellspacing="0 width="398">
                <tr>
                  <td style="height: 25px;" valign="top">&nbsp;</td>
                </tr>
                <tr>
                  <td class="content" valign="top">
            <repeater>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td style="font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572; letter-spacing: -2px; padding-bottom: 20px;">
                            <singleline label="Title" repeatertitle="true">Enter Title Here</singleline></td>
                                </tr>
                                <tr>
                                    <td style="font-family: Helvetica, Arial, sans-serif; color: #767572; padding: 0 0 10px;">
                                        <img alt="" width="398" style="padding-bottom: 20px;" editable="true" label="Image" />
                                        <multiline label="Description"><p>Your content here</p></multiline>
                                    </td>
                                </tr>
                                    <tr>
                                        <td style="padding: 0pt 0pt 20px; font-family: Helvetica,Arial,sans-serif; color: #999999;" valign="top">
                                            <img style="width: 398px; height: 40px;" src="images/article_separator.gif" alt="">
                                        </td>   
                                           </tr>
                       </table>
            </repeater>
                 </td>
              </tr>
              
            </table>
            </td>
            <td valign="top" width="22">&nbsp;</td>
            <td bgcolor="#ffffff" valign="top" width="179">
                <table border="0" cellpadding="0" cellspacing="0" width="179">      
                    <tr>
                      <td width="179">
                          <table border="0" cellpadding="0" cellspacing="0" width="179">         
                                   <tr>
                                    <td colspan="5">
                                        <table style="height: 84px;" border="0" cellpadding="0" cellspacing="0" width="100%">              
                                           <tr>
                                                  <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle">This issue:</td>
                                              </tr>
                                              <tr>
                                             <td valign="top">
                                                  <table border="0" cellpadding="0" cellspacing="0" width="100%">                  
                                          <tableofcontents>
                                            <tr>
                                                <td colspan="4" align="left" valign="top" style="width: 14px; background-image: url(images/list_bullets.gif); background-repeat: no-repeat;">
                                                    <img src="images/list_bullets.gif" width="18" height="14" alt="" align="left" /></td>
                                                <td width="160" align="left" valign="top" style="font-family: Helvetica, Arial, sans-serif; color:#ffffff; padding-bottom: 7px; line-height: 110%;"><repeatertitle /></td>
                                            </tr>
                                            <tr>
                                                <td colspan="5"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                                            </tr>
                                            </tableofcontents>

                                            <tr>
                                                <td colspan="5" style="height: 25px">&nbsp;</td>
                                            </tr>
                                    </table>
                               </td>
                            </tr>
                        </table>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="5" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <td width="100%" valign="top"><br />
                        <a href="http://www.crystalball.tv/email/images/1107eguide.pdf" target="_blank"><img src="images/employersguidebutton.gif" width="179" height="37" alt="" /></a><br />
                        <a href="mailto:support@crystalball.tv?subject=training request" target="_blank"><img src="images/trainingbutton.gif" width="179" height="37" alt="" /></a><br />
                        <a href="http://www.crystalball.tv/handsets.php" target="_blank"><img src="images/handsetsbutton.gif" width="179" height="37" alt="" /></a><br />
                        <a href="mailto:support@crystalball.tv?subject=reseller query" target="_blank"><img src="images/contactusbutton.gif" width="179" height="37" alt="" /></a><br />
                       </td>
                    </tr>


                    <tr>
                        <td colspan="5" valign="top" style="height: 37px"><img src="images/sidebar_border.gif" width="100%" height="37" alt="" /></td>
                    </tr>

                    
                        <td width="37" valign="top"><img src="images/icon_email_friend.gif" width="37" height="37" alt="" /></td>
                        <td width="13" valign="top">&nbsp;</td>
                        <td width="130" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom: 10px;">
                                        <tr>
                                            <td style="font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: bold; color: #999999;">Email a Friend</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" style="font-family: Helvetica, Arial, sans-serif; height:8px;">Know someone who might be interested? <br />
                                    <forwardtoafriend style="color:#2777e9;">Forward it to them</forwardtoafriend>.
                                </td>            
                            </tr>
                        </td>                    
                </table>                              
               </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr>
                     <td valign="top" width="28">&nbsp;</td>
                </tr> 
              </table>
            </td>
          </tr> 
       </table>
      </td>
    </tr>
    <tr>
          <td colspan="3">
                <table style="color: #999999; padding-top: 10px;" border="0" cellpadding="0" cellspacing="0" width="600">
                      <tr>
                          <td colspan="3" style="height: 25px; background-image: url(images/footer_05.gif); background-repeat: no-repeat;">
                    <img src="images/footer_05.gif" alt="" height="25" width="599"></td>
                        <td rowspan="3" width="1">
                    <img src="images/footer_02.gif" alt="" height="140" width="1"></td>
                    </tr>
                <tr>
                  <td valign="top" width="260">
            <p style="margin: 0pt; padding: 0pt 0pt 6px; font-family: Helvetica,Arial,sans-serif; font-size: 16px; font-weight: bold; color: #999999;">Follow Us:</p>
                <a href="http://www.linkedin.com/company/crystal-ball-ltd" target="_blank"><img src="images/linkedin.gif" alt="" height="64" width="64"></a>&nbsp;&nbsp;
                <a href="http://twitter.com/crystalballltd" target="_blank"><img src="images/twitter.gif" alt="" height="64" width="64"></a>&nbsp;&nbsp;
                <a href="http://www.facebook.com/pages/Crystal-Ball-Ltd/161842783884510" target="_blank"><img src="images/facebook.gif" alt="" height="64" width="64"></a>&nbsp;&nbsp;
                  <td rowspan="2" valign="top" width="90">&nbsp;</td>
                  <td rowspan="2" class="address" valign="top" width="250">
                      <p style="margin: 0pt; padding: 0pt 0pt 6px; font-family: Helvetica,Arial,sans-serif; font-size: 16px; font-weight: bold; color: #999999;">Address:</p>
                          <multiline label="Description"></multiline>
                      <p>Crystal Ball Ltd&nbsp; -&nbsp;Westpoint&nbsp; 501Chester Road Manchester&nbsp;M16 9HU&nbsp;</p>
                  </td>
                </tr>
              
            </table>
         </td>
     </tr> 
    </table>
   </td>
 </tr> 
</table>
</body>
</html>
adamlcasey, 6 years ago

Ok I've solved the original problem now but when I've sent a test the view look different in different browsers and email clients. Works fine when viewing it in Safari but in Chrome, IE 8, Firefox 5,Outlook Webmail, Gmail, Outlook. The side column content spacing goes all crazy and in Outlook Webmail the main text in the CM repeated content section looks to have had all of it's line height reduced if not removed altogether?

Code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Crystal Ball's Predictions</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
a:link {
color:#2777e9;
}
a:hover {
color: #59b8cc;
}
.content h2{ font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572 !important; letter-spacing: -2px; line-height: 110%;} .address p{ font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #767572; margin: 0; padding: 0; letter-spacing: -0.3px; }
  </style>
</head>
<body leftmargin="0" topmargin="0" style="background-color: #f1f1f1;" marginheight="0" marginwidth="0"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
 
    <tr>
      <td bgcolor="#ffffff" valign="top">
      <table style="font-family: Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-size-adjust: none; color: #999999; line-height: 100%;"
align="center" border="0" cellpadding="0" cellspacing="0" width="600px;">
       
          <tr>
            <td colspan="3">
            <table style="width: 600px; height: 150px;" border="0" cellpadding="0" cellspacing="0">
             
                <tr>
                  <td style="height: 45px;" colspan="2">
                   <table border="0" cellpadding="10" cellspacing="0" width="100%">
                   
                      <tr>
                        <td style="font-family: Helvetica,Arial,sans-serif; font-size: 11px; color: #999999; padding-top: 15px;">
                        <singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline>
                        <br>
                  Having trouble reading this mail? <webversion style="color:#2777e9;">View it in your browser</webversion>.
                  Not interested anymore? <unsubscribe style="color:#2777e9;">Unsubscribe</unsubscribe></td>
                      </tr>
                   
                   </table>
            </td>

                <tr>
                  <td colspan="3" style="background-image: url(images/header_top_separator.gif); background-repeat: no-repeat; height: 7px;">
                  <img src="images/header_top_separator.gif" alt="" style="display: block;" height="7" width="600">
              </td>
                </tr>
                <tr>
                  <td colspan="3" valign="top">
                  <img style="width: 600px; height: 326px;" alt="Predictions Header" src="images/1107headerv2.jpg">
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="height: 16px; background-image: url(images/header_border.gif); background-repeat: no-repeat;" valign="top"><img style="width: 600px; height: 16px;" alt="header border" src="images/header_border.gif"></td>
                </tr>
                    <tr>
                        <td colspan="" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" width="398">




        <tr>
            <td valign="top" bgcolor="#ffffff" style="height: 25px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-weight: bold; color: #4e4e4e; letter-spacing: -2px;">
            <currentmonthname /> <currentyear /> Issue
            </td>
        </tr>



                <tr>
                  <td style="height: 25px;" valign="top">&nbsp;</td>
                </tr>
                <tr>
                  <td class="content" valign="top">
                  <repeater>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572; letter-spacing: -2px; padding-bottom: 20px;">
                                          <singleline label="Title" repeatertitle="true">Enter Title Here</singleline></td>
                                                </tr>
                                                <tr>
                                                      <td style="font-family: Helvetica, Arial, sans-serif; color: #767572; padding: 0 0 10px;">
                                                            <img alt="" width="398" style="padding-bottom: 20px;" editable="true" label="Image" />
                                                            <multiline label="Description"><p>Your content here</p></multiline>
                                                      </td>
                                                </tr>
                                                      <tr>
                                                            <td style="padding: 0pt 0pt 20px; font-family: Helvetica,Arial,sans-serif; color: #999999;" valign="top">
                                                                  <img style="width: 398px; height: 40px;" src="images/article_separator.gif" alt="">
                                                            </td>  
                                                         </tr>
                           </table>
                  </repeater>
                                       </td>
              </tr>
             
            </table>
                        </td>
                        <td colspan="" valign="top">
                        </td>
                        <td colspan="" valign="top">
                                                <table style="height: 84px;" border="0" cellpadding="0" cellspacing="0" width="100%">             
                                                   <tr>
                                                            <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">This issue:</td>
                                                  </tr>
                                                  <tr>
                                                     <td valign="top">
                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">                 
                                                            <tableofcontents>
                                                                  <tr>
                                                                        <td colspan="4" align="left" valign="top" style="width: 14px; background-image: url(images/list_bullets.gif); background-repeat: no-repeat;">
                                                                              <img src="images/list_bullets.gif" width="18" height="14" alt="" align="left" /></td>
                                                                        <td width="160" align="left" valign="top" style="font-family: Helvetica, Arial, sans-serif; color:#ffffff; padding-bottom: 7px; line-height: 110%;"><repeatertitle /></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td colspan="5"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                                                                  </tr>
                                                                  </tableofcontents>
                                                      <td align="left" style="background-image: url(images/list_bullets.gif); width: 14px;
                                                          background-repeat: no-repeat" valign="top">
                                                        </td>
                                                      <tr>
                                                      </tr>
                                                          <td>
                                                          </td>
                                                              <img alt="" height="10" src="images/list_separator.gif" width="179" /><tr>
                                                                        <td style="height: 25px">&nbsp;</td>
                                                                  </tr>
                                                    </table>
                                             </td>
                                          </tr>
                                    </table>
                            <br />
                            <table border="0" cellpadding="0" cellspacing="0" width="179">
                     <tr>
                                                            <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">Quick Links:</td>
                                         </tr>
                                <tr>
                                    <td colspan="5">
                                  </td>
                              </tr>
                 <tr>
                                  <td valign="top"><a href="http://www.crystalball.tv/email/images/1107eguide.pdf" target="_blank"><img src="images/priceguidebutton.gif" width="179" height="37" alt="" /></a></td>
                    </tr>
                              <tr>
                                  <td valign="top"><a href="http://www.crystalball.tv/email/images/1107eguide.pdf" target="_blank"><img src="images/employersguidebutton.gif" width="179" height="37" alt="" /></a></td>
                    </tr>
                                <tr>
                                    <td valign="top">
                            <a href="mailto:support@crystalball.tv?subject=training request" target="_blank"><img src="images/trainingbutton.gif" width="179" height="37" alt="" /></a></td>
                                </tr>
                                <tr>
                                    <td valign="top">
                            <a href="http://www.crystalball.tv/handsets.php" target="_blank"><img src="images/handsetsbutton.gif" width="179" height="37" alt="" /></a></td>
                                </tr>
                                <tr>
                                    <td valign="top">
                            <a href="mailto:support@crystalball.tv?subject=reseller query" target="_blank"><img src="images/contactusbutton.gif" width="179" height="37" alt="" /></a></td>
                                </tr>
                            </table>
                            <br />

                            <table border="0" cellpadding="0" cellspacing="0" width="179">
                <tr>
                                    <td colspan="2" style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
                                </tr>
                <tr>
                                    <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1"> Follow Us:</td>
                                </tr>
                <tr><td colspan="2" valign="top" align="left">
                    <table>
                    <tr>
                                  <td valign="top"><a href="http://www.linkedin.com/company/crystal-ball-ltd" target="_blank"><img src="images/linkedinicon.png" width="32" height="32" alt="Follow Crystal Ball on Linkedin" /></a></td>
                                 <td valign="top"><a href="http://twitter.com/crystalballltd" target="_blank"><img src="images/twittericon.png" width="32" height="32" alt="Follow Crystal Ball on Twitter" /></a></td>
                                    <td valign="top"><a href="http://www.facebook.com/pages/Crystal-Ball-Ltd/161842783884510" target="_blank"><img src="images/facebookicon.png" width="32" height="32" alt="Follow Crystal Ball on Facebook" /></a></td>
                                  <td valign="top"><a href="http://www.youtube.com/user/CrystalBallLtd" target="_blank"><img src="images/youtubeicon.png" width="32" height="32" alt="Follow Crystal Ball on Youtube" /></a></td>
                    </tr>
                    </table> 
                    </td>
                                   

</tr>
<tr>
                                    <td colspan="2" style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
                                </tr>





                                <tr>
                                    <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">Email a Friend:</td>
                                </tr>
                
                                <tr>
                                    <td valign="top">
                                                Know someone who might be interested? <br />
                                                      <forwardtoafriend style="color:#2777e9;">Forward it to them</forwardtoafriend>.
                                    </td>
                                </tr>

                <tr>
                                    <td colspan="2" style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
                                </tr>






                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="background-image: url(images/header_border.gif); background-repeat: no-repeat;
                            height: 16px" valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" style="color: #999999; padding-top: 10px"
                                width="600">
                                <tr>
                                    <td colspan="3" style="background-image: url(images/footer_05.gif); background-repeat: no-repeat;
                                        height: 25px">
                                        </td>
                                    <td rowspan="3" width="1">
                                        <img alt="" height="140" src="images/footer_02.gif" width="1" /></td>
                                </tr>
                                <tr>
                                    <td class="address" rowspan="2" valign="top" width="600" style="background-image: url(images/footer.gif); background-repeat: no-repeat; padding: 85px 0 0 25px;">
                                        <multiline label="Description"></multiline>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                  </td>
                </tr>
            </table>
           
            </td>
          </tr>
              </table>
</body>
</html>
roshodgekiss roshodgekiss, 6 years ago

Hi adamlcasey, welcome to the forums! Issue is that there's a bit of slightly wonky code in here, with items in the side column not being wrapped in table cells properly. Just be careful with colspan="" and others and when in doubt, wrap items in separate tables. Also, the empty <td></td> tags may have been causing trouble - not always are cell heights honoured, so you're better off putting a &nbsp; in there, or a spacer image to stop the empty cells from collapsing.

I did a little bit of cleanup, so here's the updated 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>
<title>Crystal Ball's Predictions</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
a:link {
    color:#2777e9;
}
a:hover {
    color: #59b8cc;
}
.content h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #767572 !important;
    letter-spacing: -2px;
    line-height: 110%;
}
.address p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #767572;
    margin: 0;
    padding: 0;
    letter-spacing: -0.3px;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f1f1f1; font-family: Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-size-adjust: none; color: #999999; line-height: 100%;">
  <tr>
    <td><table style="width: 600px;" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
          <td style="height: 45px;" colspan="2"><table border="0" cellpadding="10" cellspacing="0" width="100%">
              <tr>
                <td style="font-family: Helvetica,Arial,sans-serif; font-size: 11px; color: #999999; padding-top: 15px;"><singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline>
                  <br />
                  Having trouble reading this mail?
                  <webversion style="color:#2777e9;">View it in your browser</webversion>
                  .
                  Not interested anymore?
                  <unsubscribe style="color:#2777e9;">Unsubscribe</unsubscribe></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td colspan="3" style="background-image: url(images/header_top_separator.gif); background-repeat: no-repeat; height: 7px;"><img src="images/header_top_separator.gif" alt="" style="display: block;" height="7" width="600"></td>
        </tr>
        <tr>
          <td colspan="3" valign="top"><img style="width: 600px; height: 326px;" alt="Predictions Header" src="images/1107headerv2.jpg"></td>
        </tr>
        <tr>
          <td colspan="3" style="height: 16px; background-image: url(images/header_border.gif); background-repeat: no-repeat;" valign="top"><img style="width: 600px; height: 16px;" alt="header border" src="images/header_border.gif"></td>
        </tr>
        <tr>
          <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="398">
              <tr>
                <td valign="top" bgcolor="#ffffff" style="height: 25px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-weight: bold; color: #4e4e4e; letter-spacing: -2px;"><currentmonthname>
                  <currentyear>
                  Issue </td>
              </tr>
              <tr>
                <td style="height: 25px;" valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td class="content" valign="top"><repeater>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td style="font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572; letter-spacing: -2px; padding-bottom: 20px;"><singleline label="Title" repeatertitle="true">Enter Title Here</singleline></td>
                      </tr>
                      <tr>
                        <td style="font-family: Helvetica, Arial, sans-serif; color: #767572; padding: 0 0 10px;"><img alt="" width="398" style="padding-bottom: 20px;" editable="true" label="Image"/>
                          <multiline label="Description">
                            <p>Your content here</p>
                          </multiline></td>
                      </tr>
                      <tr>
                        <td style="padding: 0pt 0pt 20px; font-family: Helvetica,Arial,sans-serif; color: #999999;" valign="top"><img style="width: 398px; height: 40px;" src="images/article_separator.gif" alt="" /></td>
                      </tr>
                    </table>
                  </repeater></td>
              </tr>
            </table></td>
          <td valign="top"></td>
          <td valign="top"><table style="height: 84px;" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">This issue:</td>
              </tr>
              <tr>
                <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tableofcontents>
                      <tr>
                        <td valign="top" width="18" style="width: 18px; background-image: url(images/list_bullets.gif); background-repeat: no-repeat;"><img src="images/list_bullets.gif" width="18" height="14" alt="" align="left"/></td>
                        <td width="160" align="left" valign="top" style="font-family: Helvetica, Arial, sans-serif; color:#ffffff; padding-bottom: 7px; line-height: 110%;"><repeatertitle></td>
                      </tr>
                      <tr>
                        <td colspan="2"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                      </tr>
                    </tableofcontents>
                  </table>
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td width="14" style="background-image: url(images/list_bullets.gif); width: 14px; background-repeat: no-repeat;" valign="top"></td>
                      <td width="160">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="2"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                    </tr>
                    <tr>
                      <td style="height: 25px" colspan="2">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <br />
            <table border="0" cellpadding="0" cellspacing="0" width="179">
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle">Quick Links:</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td valign="top"><a href="http://www.crystalball.tv/email/images/1107eguide.pdf" target="_blank"><img src="images/priceguidebutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="http://www.crystalball.tv/email/images/1107eguide.pdf" target="_blank"><img src="images/employersguidebutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="mailto:support@crystalball.tv?subject=training request" target="_blank"><img src="images/trainingbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="http://www.crystalball.tv/handsets.php" target="_blank"><img src="images/handsetsbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="mailto:support@crystalball.tv?subject=reseller query" target="_blank"><img src="images/contactusbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
            </table>
            <br />
            <table border="0" cellpadding="0" cellspacing="0" width="179">
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1"> Follow Us:</td>
              </tr>
              <tr>
                <td valign="top" align="left"><table>
                    <tr>
                      <td valign="top"><a href="http://www.linkedin.com/company/crystal-ball-ltd" target="_blank"><img src="images/linkedinicon.png" width="32" height="32" alt="Follow Crystal Ball on Linkedin" /></a></td>
                      <td valign="top"><a href="http://twitter.com/crystalballltd" target="_blank"><img src="images/twittericon.png" width="32" height="32" alt="Follow Crystal Ball on Twitter" /></a></td>
                      <td valign="top"><a href="http://www.facebook.com/pages/Crystal-Ball-Ltd/161842783884510" target="_blank"><img src="images/facebookicon.png" width="32" height="32" alt="Follow Crystal Ball on Facebook" /></a></td>
                      <td valign="top"><a href="http://www.youtube.com/user/CrystalBallLtd" target="_blank"><img src="images/youtubeicon.png" width="32" height="32" alt="Follow Crystal Ball on Youtube" /></a></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">Email a Friend:</td>
              </tr>
              <tr>
                <td valign="top"> Know someone who might be interested? <br />
                  <forwardtoafriend style="color:#2777e9;">Forward it to them</forwardtoafriend>
                  . </td>
              </tr>
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
            </table></td>
        </tr>
      </table>
      <table width="600" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td style="background-image: url(images/header_border.gif); background-repeat: no-repeat; height: 16px;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="color: #999999; padding-top: 10px;" width="600">
              <tr>
                <td style="background-image: url(images/footer_05.gif); background-repeat: no-repeat; height: 25px;"></td>
                <td rowspan="2" width="1"><img alt="" height="140" src="images/footer_02.gif" width="1"/></td>
              </tr>
              <tr>
                <td class="address" valign="top" width="600" style="background-image: url(images/footer.gif); background-repeat: no-repeat; padding: 85px 0 0 25px;"><multiline label="Description"></multiline></td>
              </tr>
            </table></td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>

No promises that this will solve all issues, but hopefully the side-column shouldn't be as problematic as before :) A good tip is to run your code through the Fractal validator, as it's good for picking up rendering issues. 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
adamlcasey, 6 years ago

Thanks Ros, you're a star!
I've had a play with the Fractal Validator, this is really useful, thanks for highlighting this tool.

Adam

adamlcasey, 6 years ago

Dooh one final issue I have is with the footer.
I've updated the code see below:

<tr>
                <td class="address" valign="top" width="600" height="150" background= "images/footer.gif"; background-repeat: no-repeat;"><multiline label="Description"></multiline>
        </td>
</tr>

I've spotted this fix in the forums:
Please test this Outlook 2007/10 background image solution

However, I'm not exactly sure how to fit it into the code without messing the current code up. Any ideas?


UPDATE:
Also I noticed that the main content (repeater content) text looks like it has had the line height stripped out as the text overlaps, making it impossible to read when viewing in Outlook Webmail. (looks fine in gmail and hotmail)

roshodgekiss roshodgekiss, 6 years ago

Hi Adam, I'd recommend referring to this post on applying background images. Using this technique, the final code looks like this:

  <tr>
    <td class="address" valign="top" width="600" height="150" background="images/footer.gif" style="background-repeat: no-repeat;">
    
    <!--[if gte mso 9]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:150px; width:600px; top:0; left:0; border:0; z-index:1;' src="http://www.example.com/images/footer.gif"/>
         <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:150px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
      <![endif]-->

      <multiline label="Description">Some text here</multiline>
      
            <!--[if gte mso 9]>
         </v:shape>
      <![endif]-->
      
      </td>
  </tr>

Note that you have to host the image on your own server to get this to work - replace example.com above with your own domain. Please watch out with your CSS - the style=" attribute was missing from td in the code sample provided.

Also I noticed that the main content (repeater content) text looks like it has had the line height stripped out as the text overlaps

Try styling up the <multiline> like so:

<p style="line-height: 1.4;"><multiline label="Description">Your content here</multiline></p>

Outlook Webmail is a pretty finicky kind of client (which admittedly I don't have loads of experience with), but hopefully explicitly stating line-height does the trick. Good luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
adamlcasey, 6 years ago

Hi Ros, thanks again for your help, I really appreciate it.

roshodgekiss roshodgekiss, 6 years ago

Always a pleasure - thanks for posting! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free