Looks good in Dreamweaver - completely messes up in Preview!!

Hi!

I'm really new this - I'm a Junior Graphic Designer who usually does print design, and decided to give building an email newsletter a go. So, this is probably a stupid question with a simple answer (here's hoping) but please bear with me.

Anyways, my problem is this:

After watching a dreamweaver cs3 tutorial dvd I managed to to get my design in html, using a lot of reference from a similar campaign monitor template. I've used tables with some css styling (barely - still getting used to it) and it all looks good in dreamweaver, but when I preview it in Safari or Firefox, it completely messes up!

The issue seems to be something with spacing, or something to do with defining the bottom of the page in a browser...I'm not really sure. All my tables stretch way downwards, past the bottom of the page, even though they're nested (I think) in a container table set to the height of the page.

All I know is that the template I based mine off displays correctly, but mine doesn't!

I have a feeling I'm missing something painfully obvious. Maybe something to do with my tag styles?

There are 2 differences I know of with the general format of the template vs mine:

As far as I can tell, the template uses a container table, then a main table, and the rest of the spacing is done with rows. So 2 tables, and more rows. Mine has a container table, then 6 tables, with rows seperating the info. 

I noticed in the template code, no specific height is specified for the container table, but mine has (I didn't know how else to make it reach the end of the page - I didn't realised the other tables would push it down).

I'll include the code below, but I'm not sure it will help because I don't know how I'd get the background image to you! That image is the only reason I can see it goes past the end of the page (and the weird spacing).

Here's the altered template code (with my background image stuck in it so that you can see where it ends correctly) code:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Template 1 - Left Sidebar</title>
   <style type="text/css" media="screen">
      body {
    background-color: #e6e6e6;
    background-image: url(marchbgfiller.jpg);
    background-position: top center;
    background-repeat: no-repeat repeat-y;
    margin: 0;
    padding: 0;
      }

      a img {
         border: none;
      }

      table.main {
         background-color: #ffffff;
      }

      td.permission {
         padding: 10px 0 10px 0;
      }

      td.permission p {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #333333;
         margin: 0;
         padding: 0;
      }

      td.permission p a {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #333333;
      }

      td.header {
         background-color: #4babc5;
         padding: 0 0 2px 0;
      }

      td.header h1 {
         font-family: 'Gill Sans', 'Arial Black', sans-serif;
         font-size: 35px;
         font-weight: bold;
         color: #ffffff;
         margin: 0 0 0 10px;
         padding: 0;
         display: inline;
      }

      td.date {
         padding: 8px 0 8px 0;
      }

      td.date p {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #666666;
         margin: 0;
         padding: 0;
      }

      td.sidebar ul {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #000000;
         margin: 10px 0 10px 24px;
         padding: 0;
      }

      td.sidebar ul li a {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #000000;
         text-decoration: none;
      }

      td.sidebar p {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #4c4c4c;
         margin: 10px 0 0 0;
         padding: 0;
      }

      td.sidebar p a {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #6cb9ce;
      }

      td.sidebar h4 {
         font-family: Georgia;
         font-size: 13px;
         font-weight: bold;
         color: #333333;
         margin: 14px 0 0 0;
         padding: 0;
      }

      td.sideHeader h3 {
         font-family: Georgia, serif;
         font-size: 18px;
         font-weight: bold;
         color: #ffffff;
         margin: 0;
         padding: 0;
      }

      td.sideTitle h3 {
         font-family: Georgia, serif;
         font-size: 18px;
         font-weight: bold;
         color: #ffffff;
         margin: 0;
         padding: 0;
      }

      td.mainbar h2 {
         font-family: Georgia;
         font-size: 18px;
         font-weight: bold;
         color: #ffffff;
         margin: 0;
         padding: 0;
      }

      td.mainbar h2 a {
         font-family: Georgia;
         font-size: 18px;
         font-weight: bold;
         color: #ffffff;
         text-decoration: none;
      }

      td.mainbar p {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #4c4c4c;
         margin: 10px 0 0 0;
         padding: 0;
      }

      td.mainbar p.more {
         padding: 0 0 10px 0;
      }

      td.mainbar p a {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #6cb9ce;
      }

      td.mainbar p img {
         border-bottom: 4px solid #edc913;
      }

      td.mainbar ul {
         font-family: Arial;
         font-size: 12px;
         font-weight: normal;
         color: #4c4c4c;
         margin: 10px 0 10px 0;
         padding: 0;
         list-style-position: inside;
      }

      td.footer {
         padding: 10px 0 10px 0;
      }

      td.footer p {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #333333;
         margin: 0;
         padding: 0;
      }
   </style>

</head>
<body>

<table width="100%" cellspacing="10" cellpadding="0">
   <tr>
      <td align="center" valign="top">
         
         <table width="580" border="0" cellspacing="0" cellpadding="0" class="main">
            <tr>
               <td height="71" align="center" class="permission">
                 <p>Thanks for your interest</p>
                  </td>
           </tr>
            <tr>
               <td height="90" valign="bottom" align="left" class="header">
                  <img src="header.gif" width="580" height="90" alt="ABC Widgets" />
               </td>
            </tr>
            <tr>
               <td align="center">
                 
                  <table width="550" cellspacing="0" cellpadding="0">
                     <tr>
                        <td width="192" height="62"></td>
                       <td></td>
                        <td class="date"><p>Monday 28 april</p></td>
                     </tr>
                     <tr align="left" rowspan="3" valign="top">
                       
                        <td width="192" valign="top" class="sidebar" align="left">

                           <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#eeeeee">
                              <tr>
                                 <td bgcolor="#000000" class="sideHeader">
                                    <h3>In this issue</h3>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <ul>
                                       <li><a href="#">Lorem ipsum dolar sit amet</a></li>
                                       <li><a href="#">Donce imperiat accumsan felis</a></li>
                                       <li><a href="#">Aliquam lectus orci, adipiscing</a></li>
                                    </ul>
                                 </td>
                              </tr>
                           </table>
                           
                           <img src="smallspacer.gif" width="192" height="25" />

                           <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td class="sideTitle">
                                    <h3>In other news</h3>
                                 </td>
                              </tr>
                           </table>
                           <h4>Proin sagittis tincidunuris. Ali quam erat.</h4>
                           <p>Nunc ipsum metus, iaculis sit amet, interdum at. <a href="#">Donce imperiat ccumsan</a> felis.</p>
                           <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravidacras sed ante. Phasellus in massa.</p>

                           <img src="smallhr.gif" width="190" height="19" />

                           <h4>Proin sagittis tincidunuris. Ali quam erat.</h4>
                           <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravidacras sed ante. Phasellus in massa.</p>

                           <img src="smallhr.gif" width="190" height="19" />
                           
                           <img src="smallspacer.gif" width="192" height="25" />

                           <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td class="sideTitle">
                                    <h3>Forward to a friend</h3>
                                 </td>
                              </tr>
                           </table>
                           <p>Know someone who might be interested in the email? Why not <forwardtoafriend>forward this email</forwardtoafriend> to them.</p>

                           <img src="smallhr.gif" width="190" height="19" />

                           <img src="smallspacer.gif" width="192" height="25" />

                           <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td class="sideTitle">
                                    <h3>Unsubscribe</h3>
                                 </td>
                              </tr>
                           </table>
                           <p>Don't want to receive these emails any more. Please <unsubscribe>unsubscribe instantly</unsubscribe>.</p>

                           <img src="smallhr.gif" width="190" height="19" />
                        </td>

                        <td width="28"></td>

                        <td width="330" valign="top" class="mainbar" align="left">

                           <table cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td>
                                    <h2>Lorem ipsum dolar sit amet</h2>
                                 </td>
                              </tr>
                           </table>

                           <p>Suspendisse potenti--Fusce eu ante in sapien vestibulum sagittis. Cras purus. Nunc rhoncus.</p>
                           <p>Donec imperdiet, nibh sit amet pharetra placerat, tortor purus condimentum lectus, at <a href="#">dignissim nibh</a> velit vitae sem. Nunc condimentum blandit tortorphasellus facilisis neque vitae purus.</p>
                           <p class="more"><a href="#">Read more</a></p>

                           <img src="hr.gif" width="329" height="27" />

                           <table cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td>
                                    <h2>Donce imperiat accumsan felis</h2>
                                 </td>
                              </tr>
                           </table>

                           <img src="spacer.gif" width="329" height="12" />

                           <p><img src="contentImage.jpg" /></p>
                           <p>Fermentum quam. Donec imperdiet, nibh sit amet pharetra placerat--tortor purus condimentum lectus.</p>
                           <p class="more"><a href="#">Read more</a></p>

                           <img src="hr.gif" width="329" height="27" />

                           <table cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td>
                                    <h2>Aliquam lectus orci, adipiscing</h2>
                                 </td>
                              </tr>
                           </table>
                           <p>Cras purus. Nunc rhoncus. Pellentesque semper. Donec imperdiet accumsan felis. Proin eget mi. Sed at est.</p>
                           <ul>
                              <li>Aliquam lectus orci, adipiscing et, sodales ac</li>
                              <li>Ut dictum velit nec est. Quisque posuere, purus sit amet</li>
                              <li>malesuada blandit, sapien sapien auctor arcu</li>
                           </ul>
                           <p class="more"><a href="#">Read more</a></p>

                           <img src="hr.gif" width="329" height="27" />

                           <table cellspacing="0" cellpadding="4" bgcolor="#000000">
                              <tr>
                                 <td>
                                    <h2>Fermentum quam—donec imperde</h2>
                                 </td>
                              </tr>
                           </table>

                           <img src="spacer.gif" width="329" height="12" />

                           <p><img src="contentImage-inline.jpg" width="164" height="159" alt="Content Image Inline"  align="left" hspace="10" /> Cras purus. Nunc rhoncus. Pellentesque semper. Donec imperdiet accumsan felis. Proin eget mi. Sed at est. Nunc a purus eu sapien–lacinia fermentum.<br /><br />Donec iaculis Nunc a purus eu sapien--lacinia fermentum. Donec iaculis Nunc a purus eu sapien--lacinia  fermen-tum quam. Donec imperdiet, nibh sit amet pharetra placerat, tortor purus condimentum lectus.</p>
                           <p class="more"><a href="#">Read more</a></p>

                           <img src="hr.gif" width="329" height="27" />
                        </td>
                     </tr>
                  </table>
                 
               </td>
            </tr>
            <tr>
               <td height="66" align="center" class="footer">
                 <p>abcWidgets and the abcWidgets Logo are registered trademarks of <span style="font-weight: bold;">abcWidgets Corp</span>.</p>
                  <p>ABCWidgets Corp — 123 Some Street, City, ST 99999. Ph +1 4 1477 89 745</p>
               </td>
           </tr>
         </table>

      </td>
   </tr>
</table>


</body>
</html>




And Here's my file 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>Ride the Hill News</title>
<style type="text/css" media="screen">

body,td,th {
    font-family: Helvetica, Verdana, Arial, Sans-serif;
    font-size: medium;
}
p {
    font-family: impact, "Arial Black", "rockwell extra bold";
    font-size: 350%;
    color: #FFFFFF;
}
table {
    margin-right: auto;
    margin-left: auto;
}
body {
    background-color: #FFFFFF;
    background-image: url(Images/bestsofarbggreen.jpg);
    background-position: top center;
    background-repeat: no-repeat repeat-y;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
td {
    font-family: Helvetica, Verdana, Arial, Sans-serif;
    font-size: large;
    margin-right: auto;
    margin-left: auto;
}
h5 {
    font-size: 30pt;
    font-family: impact, "Arial Black", "rockwell extra bold";
    color: #006400;
}
h3 {
    font-family: impact, "Arial Black", "rockwell extra bold";
    font-size: 225%;
    color: #FFFFFF;
    text-decoration: none;
}
#link {
    text-decoration: none;
}
#footer {
}
.footer {
    clear: both;
}
h1 {
    font-family: impact, "Arial Black", "rockwell extra bold";
    font-size: 400%;
    color: #99CC67;
    line-height: 75%;
}
h6 {
    font-family: Helvetica, Verdana, Arial, Sans-serif;
    font-size: 55%;
    color: #99CC67;
    line-height: 130%;
    background-color: #006400;
}
.style3 {color: #FFFFFF}
h4 {
    font-family: Helvetica, Verdana, Arial, Sans-serif;
    font-size: 14pt;
    color: #006400;
    line-height: 90%;
}
h2 {
    font-family: Helvetica, Verdana, Arial, Sans-serif;
    font-size: 100%;
    color: #FFFFFF;
    background-color: #006400;
}
link {
    text-decoration: none;
}
a:link {
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
    color: #FFFFFF;
}
a:visited {
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
}
a:hover {
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
}
a:active {
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
}
img {
    text-decoration: none;
    border: 0px 0 0;
}
td.main {
}
.style31 {
    font-size: 130%;
    color: #FFFFFF;
}
.style32 {
    font-size: 59%;
    color: #006400;
}
.style33 {
    font-size: 44.37%;
    color: #000000;
}
.style34 {color: #000000}
.style35 {color: #F38A20}
-->
</style>
</head>

<body>
<table width="100%" height="1405" border="0" cellpadding="0" cellspacing="10">
 
  <tr>
    <td width="93%" height="1385" valign="top">
    <table width="580" height="75" border="0" cellpadding="0" cellspacing="0">
 
  <tr>
    <td height="75"><h6><span class="style31">Thanks for your interest in Ride the Hill!</span><br />
      You are receiving this email because you have signed up to our newsletter or a friend has forwarded it to you. <br />
      Want to pass the message on? <span class="style3"><forwardtoafriend>FORWARD TO A FRIEND</forwardtoafriend></span>. Not interested anymore? Instantly <span class="style3"><unsubscribe>UNSUBSCRIBE</unsubscribe>. </span><br />
        PLEASE FULL VIEW THIS EMAIL BY CLICKING <span class="style3"><webversion>VIEW IN BROWSER</webversion></span> TO SEE ALL IMAGES. </h6></td>
  </tr>
</table>
   
    <table width="590" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="595" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><h1>MARCH<br />
            <span class="style32">NEWSLETTER</span><br />
            <span class="style33">SPRING ISSUE #1</span></h1></td>
      </tr>
      <tr>
        <td height="58">&nbsp;</td>
      </tr>
      <tr>
        <td height="96"><h5 class="style34"><br />
          Ride The Hill News</h5></td>
      </tr>
    </table>   
    <table width="480" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="282" height="48">&nbsp;</td>
        <td width="198">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top" align="left" bgcolor="#006400"><p>COMING UP</p></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="109" valign="top" align="left" bgcolor="#006400"><h5 class="style3">blurble blurb<br />
        blurby blurbed.</h5></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="20"><h6>Terms and conditions apply</h6></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="36">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><h5>NEW LOOK!</h5></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="92" valign="top" align="left"><h4>information blah blah blah</h4></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="33">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><h5>ALSO THIS MONTH</h5></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="94" valign="top" align="left"><h4>info goes here</h4></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="31">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><h5>DON'T MISS...</h5></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="95" valign="top" align="left"><h4>informationz</h4></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="31">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="570" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="52" align="left" valign="top"><h3><span class="style35">0845</span> 0944 <span class="style34">360</span></h3></td>
      </tr>
      <tr>
        <td><h3><a href="http://www.ridethehill.com">www.ridethehill.com</a></h3></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="570" height="78" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="360" height="78" valign="top" align="left"><h2><br />
          XBP Mountainboard Centre, Sandy Lane,<br />
          Nutfield, Surrey.  RH1 4EJ</h2></td>
        <td width="71" valign="top" align="left"><a href="http://www.facebook.com/pages/Ride-the-Hillcom-The-UKs-Premium-Mountainboard-Suppliers/8331013450?ref=ts"><img src="Images/facebook.png" alt="Facebook logo and link the Ride The Hill facebook site" width="63" height="65" /></a></td>
        <td width="71" valign="top" align="left"><a href="http://twitter.com/Ridethehill"><img src="Images/Untitled-2.png" alt="Twitter link to Ride The Hill twitter website" width="64" height="64" /></a></td>
        <td width="62" valign="top" align="left"><a href="http://www.flickr.com/photos/ridethehill"><img src="Images/flickr.png" alt="FlickR logo - link to Ride The Hill FlickR page" width="62" height="63" /></a></td>
      </tr>
    </table>   </td>
  </tr>
</table>

</body>
</html>

If someone can help can you also email me personally at Roseannebastendesign@gmail.com please and I can send the whole site folder to you.

I also just found out my background image, which is stupidly rather crucial to my newsletter (it has my main images inside it) won't display in gmail  >_<

I still need to sort ids and my classes out too.

Please help!

Thanks,

Roseanne

davidaf davidaf, 6 years ago

Hi Roseann,

If you contact us at support we'll get back to you and you can send us both the HTML and image files so we can work with the whole thing and see what needs to be done to fix your code.


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

Thanks!

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