Image problem in dreamweaver all spread out

Using Dreamweaver 8 & photoshop cs2
created site graphics with roll over in photoshop cs2
see test site http://thethirdlink.com/asc/ASCneighborhood.html , note the graphics problem ,any suggestions on how can I correct this problem I tried Div tags but not sure where to apply them here is the code

<html>
<head>
<title>Neighborhood Developments</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- ImageReady Preload Script (ASCneighborhood.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
      if (document.images) {
            rslt = new Image();
            rslt.src = arg;
            return rslt;
      }
}

function changeImages() {
      if (document.images && (preloadFlag == true)) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                  document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
      }
}

var preloadFlag = false;
function preloadImages() {
      if (document.images) {
            ASCabouthomebtn_10_over = newImage("images/ASCabouthomebtn_10-over.gif");
            ASCaboutaboutbtn_11_over = newImage("images/ASCaboutaboutbtn_11-over.gif");
            ASCaboutwhychoosebtn_12_over = newImage("images/ASCaboutwhychoosebtn_12-ove.gif");
            ASCaboutservicebtn_13_over = newImage("images/ASCaboutservicebtn_13-over.gif");
            ASCaboutneighborbtn_14_over = newImage("images/ASCaboutneighborbtn_14-over.gif");
            ASCaboutphotobtn_15_over = newImage("images/ASCaboutphotobtn_15-over.gif");
            ASCaboutlinksbtn_16_over = newImage("images/ASCaboutlinksbtn_16-over.gif");
            ASCaboutcontactbtn_17_over = newImage("images/ASCaboutcontactbtn_17-over.gif");
            preloadFlag = true;
      }
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
.style6 {
      font-size: 11pt;
      color: #6B7E00;
      text-indent: 3px;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0;
      margin-left: 20px;
      line-height: 20pt;
}
.style12 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 8pt;
      line-height: 11pt;
      display: block;
      text-indent: 0px;
      margin-left: 5px;
      color: #000000;
      margin-right: 0px;
}
.style16 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 13pt; display: block; text-indent: 0px; margin-left: 20px; color: #000000; margin-right: 0px; }
body {
      background-color: #ebebeb;
}
.style17 {font-size: 7pt}
.style18 {color: #0099FF}
.style19 {color: #0099FF; font-size: 7pt; }
.style20 {color: #0099ff}
.style21 {font-size: 7pt; color: #0099ff; }
.style25 {font-size: 7pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style26 {
      color: #666666;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 7pt;
      line-height: 25px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<!-- ImageReady Slices (ASCneighborhood.psd) -->
<table width="792" height="541" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
      <tr>
            <td colspan="16">
                  <img src="images/ASCneighborhood_01.gif" width="792" height="36" alt=""></td>
      </tr>
      <tr>
            <td rowspan="8" bgcolor="#FFFFFF">
                  <img src="images/ASCneighborhood_02.gif" width="35" height="486" alt=""></td>
            <td>
                  <img src="images/ASCneighborlogo_03.gif" width="170" height="46" alt=""></td>
            <td colspan="8">
                  <img src="images/ASCneighborhood_04.gif" width="335" height="46" alt=""></td>
            <td colspan="5">
                  <img src="images/ASCneighborcontact_05.gif" width="215" height="46" alt=""></td>
            <td rowspan="8" bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td rowspan="3">
                  <img src="images/ASCneighborimage_07.jpg" width="170" height="127" alt=""></td>
            <td colspan="2">
                  <img src="images/ASCneighborhood_08.jpg" width="98" height="9" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborhood_09.gif" width="452" height="9" alt=""></td>
      </tr>
      <tr>
            <td>
                  <a href="index.html"
                        onmouseover="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;"
                        onmouseout="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10.gif'); return true;"
                        onmousedown="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;"
                        onmouseup="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;">
                        <img name="ASCabouthomebtn_10" src="images/ASCabouthomebtn_10.gif" width="48" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCabout.html"
                        onmouseover="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11.gif'); return true;"
                        onmousedown="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;">
                        <img name="ASCaboutaboutbtn_11" src="images/ASCaboutaboutbtn_11.gif" width="50" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCwhychoose.html"
                        onmouseover="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;"
                        onmouseout="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12.gif'); return true;"
                        onmousedown="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;"
                        onmouseup="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;">
                        <img name="ASCaboutwhychoosebtn_12" src="images/ASCaboutwhychoosebtn_12.gif" width="79" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCservices.html"
                        onmouseover="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13.gif'); return true;"
                        onmousedown="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;">
                        <img name="ASCaboutservicebtn_13" src="images/ASCaboutservicebtn_13.gif" width="49" height="18" border="0" alt=""></a></td>
            <td colspan="5">
                  <a href="ASCneighborhood.html"
                        onmouseover="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14.gif'); return true;"
                        onmousedown="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;">
                        <img name="ASCaboutneighborbtn_14" src="images/ASCaboutneighborbtn_14.gif" width="137" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCphoto.html"
                        onmouseover="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15.gif'); return true;"
                        onmousedown="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;">
                        <img name="ASCaboutphotobtn_15" src="images/ASCaboutphotobtn_15.gif" width="73" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASClinks.html"
                        onmouseover="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16.gif'); return true;"
                        onmousedown="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;">
                        <img name="ASCaboutlinksbtn_16" src="images/ASCaboutlinksbtn_16.gif" width="35" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCcontact.html"
                        onmouseover="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17.gif'); return true;"
                        onmousedown="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;">
                        <img name="ASCaboutcontactbtn_17" src="images/ASCaboutcontactbtn_17.gif" width="71" height="18" border="0" alt=""></a></td>
            <td>
                  <img src="images/ASCneighborhood_18.gif" width="8" height="18" alt=""></td>
      </tr>
      <tr>
            <td colspan="2">
                  <img src="images/ASCneighborhood_19.jpg" width="98" height="100" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborbannertype_20.gif" width="452" height="100" alt=""></td>
      </tr>
      <tr>
            <td colspan="14">
                  <img src="images/ASCneighborhood_21.gif" width="720" height="6" alt=""></td>
      </tr>
      <tr>
            <td colspan="14">
                  <img src="images/ASCneighborhood_22.gif" width="720" height="28" alt=""></td>
      </tr>
      <tr>
            <td colspan="6" rowspan="2" valign="top" bgcolor="#FFFFFF"><p><span class="style6">Neighborhood Developments<br>
                <span class="style16">Each neighborhood below is special to ASC. They understand that finding the right place is important to you and your family. ASC invites you to read about each neighborhood and then search for your perfect home. If you cannot find a home that meets your criteria, contact their office to discuss a beautiful, new custom-built home!</span></span></p>
              <table width="427" cellpadding="10" cellspacing="15">
            <tr>
              <td width="165" align="left" valign="top"><span class="style12"><strong>Brannon's Crossing</strong><br>
              &bull; Northwest Dothan<br>
              &bull; Off of Murphy Mill Road<br>
              &bull; Community pond<br>
              &bull; Spacious lots<br>
              &bull; Conveniently located near Kelly Springs Elementary School &amp; Providence Christian.<br>
              <span class="style17"><br>
              <span class="style18">&gt;&gt;&gt;Find a home in Brannon's Crossing</span> </span></span></td>
              <td width="175"><img src="images/neighbor1.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Camden Ridge</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Fortner Street<br>
&bull; Spacious lots<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Camden Ridge</span> </span></td>
              <td><img src="images/camden.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Crestwood Village</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Fortner Street<br>
&bull; Homes between 1350-1900 sq. ft.<br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Crestwood Village </span></span></td>
              <td><img src="images/crestwood.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Grove Park</strong><br>
              &bull; Northwest Dothan<br>
&bull; Great location off Highway 84, close to Flowers Hospital<br>
&bull; Wonderful community atmosphere<br>
&bull; Many amenities &ndash; sidewalks, tree-lined streets, streetlights, <br>
community park with playground<br>
&bull; Homes between 1500-3000 sq. ft. <br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Grove Park</span> </span></td>
              <td><img src="images/grovepark.jpg" width="175" height="163" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Highlands South &amp; The Village</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Highway 84 West and
Brannon Stand Road<br>
&bull; Convenient to Highlands Elementary<br>
&bull; Sidewalks, parks<br>
&bull; On Robert Trent Jones Golf Course<br>
&bull; The Village &ndash; <br>
homes between 2000-3000 sq. ft.<br>
&bull; Highlands South &ndash; <br>
homes between 2500-4000 sq. ft. <br>
              <span class="style17"><br>
              <span class="style18">&gt;&gt;&gt;Find a home in Highlands South or The Village </span></span></span></td>
              <td><img src="images/village.jpg" width="175" height="226" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Kelly Springs</strong><br>
              &bull; Northwest Dothan<br>
&bull; Off Murphy Mill and Barrington Road<br>
&bull; Near Kelly Springs Elementary and<br>
Providence Christian School<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <span class="style17"><br>
              <span class="style20">&gt;&gt;&gt;Find a home in Kelly Springs</span></span> </span></td>
              <td><img src="images/kelly.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Westbrook</strong><br>
              &bull; Northwest Dothan<br>
&bull; Off of John D. Odom Road<br>
&bull; Near Houston Academy, Flowers Hospital<br>
&bull; Sidewalks, streetlights<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <span class="style17"><br>
              <span class="style20">&gt;&gt;&gt;Find a home in Westbrook</span></span> </span></td>
              <td><img src="images/westbrook.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Pine Lake</strong><br>
              &bull; Southwest Dothan<br>
&bull; Off of Taylor Road<br>
&bull; Big community lake, park<br>
&bull; Homes between 1300-2500 sq. ft. <br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Pine Lake</span> </span></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Reflections On The Water</strong> <br>
                &bull; Eufaula, AL<br>
                &bull; Off of Highway 431<br>
                &bull; Detailed craftsman-style lake houses<br>
                &bull; Lots of community amenities<br>
                <br>
                <span class="style21">&gt;&gt;&gt;Find a home in Reflections On The Water</span> </span></td>
              <td>&nbsp;</td>
            </tr>
          </table>
            
              <p>&nbsp;</p></td>
            <td bgcolor="#FFFFFF"></td>
            <td rowspan="2" bgcolor="#FFFFFF"></td>
            <td colspan="6" rowspan="2" bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td colspan="16">
                  <img src="images/ASCneighborhood_28.gif" width="792" height="18" alt=""></td>
      </tr>
      <tr>
            <td>
                  <img src="images/spacer.gif" width="35" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="170" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="48" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="50" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="79" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="49" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="33" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="39" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="14" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="23" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="28" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="73" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="35" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="71" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="8" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="37" height="1" alt=""></td>
      </tr>
</table>
<div align="center" class="style25"><span class="style26">For problems contact Webmaster.&nbsp; | &nbsp;Site design by Norma Hanson &amp; Associates. <br>
  <!-- End ImageReady Slices -->
  </span></div>
</body>
</html>
rawilkinsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

fuzzboxerCommented:
To me, it looks like your problems stems from using Photoshop slices.  Slices tries to fit everything into a table.  All of your different sized images don't mesh well together and the different row/column spans do not space correctly.  If you must use slices, try to keep your slices on the horizontal and cut as few times as possible.

However, the ideal solution would be to use CSS with a few images to achieve the results you desire.  In your header, I see what could be three images and a menu.  Currently, it is split into about 10 images.
0
Jason C. LevineNo oneCommented:
Hi rawilkins,

Your colspans are screwed up.

First row of the table:

<tr>

            <td colspan="16">
                  <img src="images/ASCneighborhood_01.gif" width="792" height="36" alt=""></td>
      </tr>


16 columns.

Second row:

      <tr>
            <td rowspan="8" bgcolor="#FFFFFF">
                  <img src="images/ASCneighborhood_02.gif" width="35" height="486" alt=""></td>
            <td>
                  <img src="images/ASCneighborlogo_03.gif" width="170" height="46" alt=""></td>
            <td colspan="8">

                  <img src="images/ASCneighborhood_04.gif" width="335" height="46" alt=""></td>
            <td colspan="5">
                  <img src="images/ASCneighborcontact_05.gif" width="215" height="46" alt=""></td>
            <td rowspan="8" bgcolor="#FFFFFF"></td>
      </tr>

29 columns.

Third row:

      <tr>
            <td rowspan="3">
                  <img src="images/ASCneighborimage_07.jpg" width="170" height="127" alt=""></td>
            <td colspan="2">

                  <img src="images/ASCneighborhood_08.jpg" width="98" height="9" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborhood_09.gif" width="452" height="9" alt=""></td>
      </tr>

16 columns again.

The browser is trying to fix the different colspans and that results in the misaligned elements.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.