19 Replies Latest reply: Apr 3, 2013 8:17 AM by MurraySummers RSS

    Does anyone know why my sliced image breaks up in the browswer?

    leroyg-vuvxgs

      <div id="content-container">

          <div class="center">

       

              <div id="body-wrap">

                  <div id="content-container">

          <div class="center">

       

              <div id="body-wrap">

                  <div id="posts-full">

                      <div class="post">

                          <div class="entry">

                              <table id="Table_01" width="963" height="409" border="0" cellpadding="0" cellspacing="0" align="center">

          <tr>

              <td colspan="21"><img src="images/header.png" width="963" height="62" /></td>

          </tr>

          <tr>

              <td rowspan="8">

                  <img src="images/fantasy_02.png" width="17" height="346" alt=""></td>

              <td colspan="3">

                  <img src="images/Front-9.png" width="23" height="142" alt=""></td>

              <td rowspan="2"><a href="#" onclick="MM_swapImage('hole1','','images/1add.png',1)"><img src="images/1st.png" name="hole1" width="101" height="143" border="0" id="hole1" /></a></td>

              <td colspan="3" rowspan="2"><a href="#"><img src="images/2nd.png" name="hole2" width="101" height="143" border="0" id="hole2" /></a></td>

              <td colspan="3" rowspan="2"><a href="#"><img src="images/3rd.png" name="hole3" width="101" height="143" border="0" id="hole3" /></a></td>

              <td rowspan="2">

                  <img src="images/4player.png" width="101" height="143" alt=""></td>

              <td colspan="2" rowspan="2">

                  <img src="images/5player.png" width="101" height="143" alt=""></td>

              <td rowspan="2">

                  <img src="images/6player.png" width="101" height="143" alt=""></td>

              <td rowspan="2">

                  <img src="images/7player.png" width="101" height="143" alt=""></td>

              <td colspan="2" rowspan="2">

                  <img src="images/8player.png" width="101" height="143" alt=""></td>

              <td colspan="2" rowspan="2">

                  <img src="images/9player.png" width="101" height="143" alt=""></td>

              <td rowspan="8">

                  <img src="images/fantasy_13.png" width="14" height="346" alt=""></td>

          </tr>

          <tr>

              <td>

                  <img src="images/Front-9-15.png" width="1" height="1" alt=""></td>

              <td colspan="2" rowspan="2">

                  <img src="images/Back-9.png" width="22" height="142" alt=""></td>

          </tr>

          <tr>

              <td rowspan="2">

                  <img src="images/fantasy_16.png" width="1" height="146" alt=""></td>

              <td>

                  <img src="images/10player.png" width="101" height="141" alt=""></td>

              <td colspan="3">

                  <img src="images/11player.png" width="101" height="141" alt=""></td>

              <td colspan="3">

                  <img src="images/12player.png" width="101" height="141" alt=""></td>

              <td>

                  <img src="images/13player.png" width="101" height="141" alt=""></td>

              <td colspan="2">

                  <img src="images/14player.png" width="101" height="141" alt=""></td>

              <td>

                  <img src="images/15player.png" width="101" height="141" alt=""></td>

              <td>

                  <img src="images/16player.png" width="101" height="141" alt=""></td>

              <td colspan="2">

                  <img src="images/17player.png" width="101" height="141" alt=""></td>

              <td colspan="2">

                  <img src="images/18player.png" width="101" height="141" alt=""></td>

          </tr>

          <tr>

              <td colspan="18">

                  <img src="images/fantasy_26.png" width="931" height="5" alt=""></td>

          </tr>

          <tr>

              <td colspan="19">

                  <img src="images/footer-bg.png" width="932" height="10" alt=""></td>

          </tr>

          <tr>

              <td colspan="6">

                  <img src="images/footer-bg-29.png" width="159" height="1" alt=""></td>

              <td colspan="2" rowspan="2">

                  <img src="images/random.png" width="139" height="31" alt=""></td>

              <td rowspan="3">

                  <img src="images/footer-bg-31.png" width="13" height="47" alt=""></td>

              <td colspan="3" rowspan="2">

                  <img src="images/clear.png" width="137" height="31" alt=""></td>

              <td colspan="7">

                  <img src="images/footer-bg-33.png" width="484" height="1" alt=""></td>

          </tr>

          <tr>

              <td colspan="2" rowspan="2">

                  <img src="images/footer-bg-34.png" width="9" height="46" alt=""></td>

              <td colspan="3">

                  <img src="images/golf-details.png" width="140" height="30" alt=""></td>

              <td rowspan="2">

                  <img src="images/footer-bg-36.png" width="10" height="46" alt=""></td>

              <td colspan="4" rowspan="2">

                  <img src="images/footer-bg-37.png" width="318" height="46" alt=""></td>

              <td colspan="2">

                  <img src="images/register-sc.png" width="165" height="30" alt=""></td>

              <td rowspan="2">

                  <img src="images/footer-bg-39.png" width="1" height="46" alt=""></td>

          </tr>

          <tr>

              <td colspan="3">

                  <img src="images/footer-bg-40.png" width="140" height="16" alt=""></td>

              <td colspan="2">

                  <img src="images/footer-bg-41.png" width="139" height="16" alt=""></td>

              <td colspan="3">

                  <img src="images/footer-bg-42.png" width="137" height="16" alt=""></td>

       

              <td colspan="2">

                  <img src="images/footer-bg-43.png" width="165" height="16" alt=""></td>

          </tr>

          <tr>

              <td>

                  <img src="images/spacer.gif" width="17" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="1" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="8" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="14" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="101" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="25" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="10" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="66" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="73" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="13" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="15" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="101" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="21" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="80" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="101" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="101" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="36" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="65" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="100" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="1" height="1" alt=""></td>

              <td>

                  <img src="images/spacer.gif" width="14" height="1" alt=""></td>

          </tr>

      </table>

       

                          </div> <!-- end .entry -->

                      </div> <!-- end .post -->               

                  </div> <!-- end #posts-full -->

              </div> <!-- #body-wrap -->

              <br class="clear" />

          </div> <!-- end .center -->

      </div><!-- end #content-container --> <!-- end #posts-full -->

              </div> <!-- #body-wrap -->

              <br class="clear" />

          </div> <!-- end .center -->

      </div><!-- end #content-container -->

        • 1. Re: Does anyone know why my sliced image breaks up in the browswer?
          Nancy O. CommunityMVP

          Using a graphics editor (photoshop or fireworks) to generate your HTML code is not going to work on the web.  It's only for quick comps to show a client.

           

          Use graphics apps for images only.  Use DW to build your HTML & CSS layout.

           

          Creating your first web site in DW  (6 part tutorial)-

          http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

           

           

           

          Nancy O.

          • 2. Re: Does anyone know why my sliced image breaks up in the browswer?
            leroyg-vuvxgs Community Member

            Hi Nancy,

             

            Thank you very much for your quick reponse, You'll have to excuse me but I don't think I've explained my problem very well, I have sliced the image in photoshop and as you know it creates a table and I've made a div for the image and put the table in the div in dreamweaver and it's looks fine in dreamweaver, but it's completly shattered in the browser and I don't know why, could it be some kinda conflict with the css file.

            • 3. Re: Does anyone know why my sliced image breaks up in the browswer?
              Nancy O. CommunityMVP

              Seriously?  You paid for this?  You should ask for a refund. The code is very old school spacer.gifs and tables with colspans and rowspans designed to hold an image slice of those exact dimensions and nothing more. As soon as you try to edit this, the tables pull apart producing unsightly gaps.  This is NOT how modern web sites are designed. 

               

              It's worth noting also that Design View is not 100% reliable.  At best it is an approximation of how your page will look in some browsers.  For best results, use Live View or Preview in browsers to see the actual product.  If the layout doesn't work in real browsers, you shouldn't use it.

               

               

              Nancy O.

              • 4. Re: Does anyone know why my sliced image breaks up in the browswer?
                leroyg-vuvxgs Community Member

                Hi Nancy,

                 

                Thanks again, to be honest I purchased this template some time ago and it was only a couple of $ so I wont ask for a refund   I'm just trying to put together a demo version of a game that I've created to show to potential investors and as you now know I'm not very experienced in web developement, I know  how it should look and how I want it to look but as you can see I'm struggling, At some stage I will be looking for a good web developement team to put together what I've created,  so if you know any good java and html 5 developers please let me know.

                 

                Thanks again for your help and advice it's much appreciated

                 

                Leroy

                • 5. Re: Does anyone know why my sliced image breaks up in the browswer?
                  Nancy O. CommunityMVP

                  JavaScript and HTML5 are standard web languages.   You should have no trouble finding someone in these forums to help you. 

                   

                  Java is something very different.  I don't work with Java & don't know anyone who does anymore.

                   

                   

                  Nancy O.

                  • 6. Re: Does anyone know why my sliced image breaks up in the browswer?
                    leroyg-vuvxgs Community Member

                    Hi Nancy,

                     

                    Sorry when you say the code is very old school what did you mean? because this was html code I got after slicing the image in photoshop aafter converting it to html and I'm using CS5, the above code had nothing to do with the template. Is there another or better way of slicing images in photoshop and transfering them to dreamweaver.

                    • 7. Re: Does anyone know why my sliced image breaks up in the browswer?
                      Nancy O. CommunityMVP

                      I see.  I'm not sure you need to slice your image.  Why not optimize it in Photoshop, Save for web as jpg to your local site folder, then insert the whole image into a division?

                       

                      In the days or old, we used tables for layouts and had to slice images into sections to fit inside all those pesky table cells.  CSS makes things much simpler.

                       

                       

                      Nancy O.

                      • 8. Re: Does anyone know why my sliced image breaks up in the browswer?
                        leroyg-vuvxgs Community Member

                        Hi Nancy,

                         

                        Yes I know I can just add an image but what I'm actually trying to do is change the names of these golfers to something else when they're rolled over, but everytime I put the sliced image into a div, it breaks up and I've  even tried putting it in a table cell but the same thing happens it completely breaks up in the browswer

                         

                        golf.JPG

                        The following is the code that's being generated after slicing the image in photoshop:

                         

                        <div class="golfers">

                         

                                                <table id="Table_01" width="961" height="345" border="0" cellpadding="0" cellspacing="0">

                            <tr>

                                <td width="8" height="127" colspan="2" rowspan="13">

                                    <img src="images/spacer.gif" width="8" height="127" alt=""></td>

                                <td colspan="6" rowspan="8">

                                    <img src="images/golfer-block.gif" width="431" height="100" alt=""></td>

                                <td>

                                    <img src="images/golfer_selection_panel_01_03.gif" width="1" height="4" alt=""></td>

                                <td colspan="16" rowspan="2">

                                    <img src="images/add-golfer-block.gif" width="512" height="43" alt=""></td>

                                <td width="8" height="344" rowspan="25">

                                    <img src="images/spacer.gif" width="8" height="344" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="4" alt=""></td>

                            </tr>

                            <tr>

                                <td rowspan="7">

                                    <img src="images/golfer_selection_panel_01_06.gif" width="1" height="96" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="39" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="2" rowspan="6">

                                    <img src="images/add-golfer-block-06.gif" width="121" height="57" alt=""></td>

                                <td rowspan="5">

                                    <img src="images/smallscroll1.png" width="26" height="40" alt=""></td>

                                <td colspan="3">

                                    <img src="images/add-golfer-block-08.gif" width="68" height="3" alt=""></td>

                                <td colspan="2" rowspan="5">

                                    <img src="images/smallscroll1.gif" width="29" height="40" alt=""></td>

                                <td colspan="8" rowspan="2">

                                    <img src="images/add-golfer-block-10.gif" width="268" height="7" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="3" alt=""></td>

                            </tr>

                            <tr>

                                <td rowspan="5">

                                    <img src="images/add-golfer-block-11.gif" width="10" height="54" alt=""></td>

                                <td rowspan="3">

                                    <img src="images/miniflag.gif" width="50" height="33" alt=""></td>

                                <td rowspan="5">

                                    <img src="images/add-golfer-block-13.gif" width="8" height="54" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="4" alt=""></td>

                            </tr>

                            <tr>

                                <td rowspan="4">

                                    <img src="images/add-golfer-block-14.gif" width="26" height="50" alt=""></td>

                                <td colspan="2">

                                    <img src="images/add-golfer-button.gif" width="119" height="28" alt=""></td>

                                <td colspan="5" rowspan="4">

                                    <img src="images/add-golfer-block-16.gif" width="123" height="50" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="28" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="2" rowspan="3">

                                    <img src="images/add-golfer-block-17.gif" width="119" height="22" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                            </tr>

                            <tr>

                                <td rowspan="2">

                                    <img src="images/add-golfer-block-18.gif" width="50" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="4" alt=""></td>

                            </tr>

                            <tr>

                                <td>

                                    <img src="images/add-golfer-block-19.gif" width="26" height="17" alt=""></td>

                                <td colspan="2">

                                    <img src="images/add-golfer-block-20.gif" width="29" height="17" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="17" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="23">

                                    <img src="images/golfer_selection_panel_01_22.gif" width="944" height="2" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="2" alt=""></td>

                            </tr>

                            <tr>

                                <td rowspan="4">

                                    <img src="images/golfer_selection_panel_01_23.gif" width="6" height="25" alt=""></td>

                                <td rowspan="3">

                                    <img src="images/name-sort.gif" width="113" height="24" alt=""></td>

                                <td colspan="21">

                                    <img src="images/golfer_selection_panel_01_25.gif" width="825" height="2" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="2" alt=""></td>

                            </tr>

                            <tr>

                                <td width="674" height="23" colspan="15" rowspan="3">

                                    <img src="images/spacer.gif" width="674" height="23" alt=""></td>

                                <td colspan="2">

                                    <img src="images/total-players.gif" width="130" height="21" alt=""></td>

                                <td width="21" height="23" colspan="4" rowspan="3">

                                    <img src="images/spacer.gif" width="21" height="23" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="2" rowspan="2">

                                    <img src="images/golfer_selection_panel_01_29.gif" width="130" height="2" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                            </tr>

                            <tr>

                                <td>

                                    <img src="images/golfer_selection_panel_01_30.gif" width="113" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                            </tr>

                            <tr>

                                <td width="6" height="217" rowspan="12">

                                    <img src="images/spacer.gif" width="6" height="217" alt=""></td>

                                <td colspan="4">

                                    <img src="images/b1_01.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_01.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_01.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_01.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_01.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_01.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b7_01.gif" width="132" height="21" alt=""></td>

                                <td rowspan="12">

                                    <img src="images/golfer_selection_panel_01_39.gif" width="1" height="217" alt=""></td>

                                <td rowspan="10">

                                    <img src="images/sidescroll.gif" width="17" height="207" alt=""></td>

                                <td rowspan="12">

                                    <img src="images/golfer_selection_panel_01_41.gif" width="1" height="217" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_02.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_02.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_02.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_02.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_02.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_02.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_02-44.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_03.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_03.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_03.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_03.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_03.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_03.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_03-51.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_04.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_04.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_04.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_04.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_04.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_04.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_04-58.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_05.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_05.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_05.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_05.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_05.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_05.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_05-65.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_06.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_06.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_06.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_06.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_06.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_06.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_06-72.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_07.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_07.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_07.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_07.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_07.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_07.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_07-79.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_08.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_08.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_08.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_08.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_08.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_08.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_08-86.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <img src="images/b1_09.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/b2_09.gif" width="133" height="21" alt=""></td>

                                <td>

                                    <img src="images/b3_09.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b4_09.gif" width="133" height="21" alt=""></td>

                                <td colspan="6">

                                    <img src="images/b5_09.gif" width="132" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_09.gif" width="133" height="21" alt=""></td>

                                <td colspan="3">

                                    <img src="images/b6_09-93.gif" width="132" height="21" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="21" alt=""></td>

                            </tr>

                            <tr>

                                <td colspan="4" rowspan="2">

                                    <img src="images/b1_10.gif" width="132" height="23" alt=""></td>

                                <td rowspan="2">

                                    <img src="images/b2_10.gif" width="133" height="23" alt=""></td>

                                <td rowspan="2">

                                    <img src="images/b3_10.gif" width="132" height="23" alt=""></td>

                                <td colspan="3" rowspan="2">

                                    <img src="images/b4_10.gif" width="133" height="23" alt=""></td>

                                <td colspan="6" rowspan="2">

                                    <img src="images/b5_10.gif" width="132" height="23" alt=""></td>

                                <td colspan="3" rowspan="2">

                                    <img src="images/b6_10.gif" width="133" height="23" alt=""></td>

                                <td colspan="3" rowspan="2">

                                    <img src="images/b6_10.png" width="132" height="23" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="18" alt=""></td>

                            </tr>

                            <tr>

                                <td width="17" height="10" rowspan="2">

                                    <img src="images/spacer.gif" width="17" height="10" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="5" alt=""></td>

                            </tr>

                            <tr>

                                <td width="927" height="5" colspan="21">

                                    <img src="images/spacer.gif" width="927" height="5" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="5" alt=""></td>

                            </tr>

                            <tr>

                                <td>

                                    <img src="images/spacer.gif" width="6" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="2" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="6" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="113" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="11" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="133" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="132" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="36" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="96" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="25" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="26" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="10" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="50" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="8" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="13" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="16" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="26" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="91" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="28" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="102" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="2" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="17" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="1" height="1" alt=""></td>

                                <td>

                                    <img src="images/spacer.gif" width="8" height="1" alt=""></td>

                                <td></td>

                            </tr>

                        </table>

                         

                        </div>

                        • 9. Re: Does anyone know why my sliced image breaks up in the browswer?
                          MurraySummers CommunityMVP

                          Would it be at all possible for you to upload this page and its images to some webspace that you control and post a link here? Being able to see the live page in the browser would help us help you enormously. And I will second Nancy's comments. The code you are using is impossibly antique, and is sort of a poster child for how NOT to build a web page. It's likely that any solution we will give you to this problem will not be a table layout with spacer gifs, rowspans and colspans. It's that very approach that is causing the unstable layout symptoms that you describe. The complexity of arrangement of column and row merges within a single large table leads to a very fragile table.

                          • 10. Re: Does anyone know why my sliced image breaks up in the browswer?
                            leroyg-vuvxgs Community Member

                            Hi Murry,

                             

                            here's a link http://inplaylive.com/  What I want is a simple rollover affect for each of these golfers, I do know how to achieve that in dreamweaver but I can't seem to get this image to stay stable in a div after slicing it, I'm thinking maybe the only other way to do it is to put the whole thing in tables?

                             

                            Leroy

                            • 11. Re: Does anyone know why my sliced image breaks up in the browswer?
                              Nancy O. CommunityMVP

                              I think you could do this very easily with a CSS styled  table in DW, real text for names preceded by little icons of flags.  No image slices required.

                              http://alt-web.com/DEMOS/vertical-scrolling-table.shtml

                               

                               

                               

                              Nancy O.


                              • 12. Re: Does anyone know why my sliced image breaks up in the browswer?
                                MurraySummers CommunityMVP

                                That would certainly be one of the best ways to do it. However, if you still want to use images, consider this as a basic way to hold the images together -

                                 

                                <div id="row1"><img src="images/b1_01.gif" width="132" height="21" alt=""><img src="images/b2_01.gif" width="133" height="21" alt=""><img src="images/b3_01.gif" width="132" height="21" alt=""><img src="images/b4_01.gif" width="133" height="21" alt=""><img src="images/b5_01.gif" width="132" height="21" alt=""><img src="images/b6_01.gif" width="133" height="21" alt=""><img src="images/b7_01.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                <div id="row2"><img src="images/b1_02.gif" width="132" height="21" alt=""><img src="images/b2_02.gif" width="133" height="21" alt=""><img src="images/b3_02.gif" width="132" height="21" alt=""><img src="images/b4_02.gif" width="133" height="21" alt=""><img src="images/b5_02.gif" width="132" height="21" alt=""><img src="images/b6_02.gif" width="133" height="21" alt=""><img src="images/b6_02-44.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                <div id="row3"><img src="images/b1_03.gif" width="132" height="21" alt=""><img src="images/b2_03.gif" width="133" height="21" alt=""><img src="images/b3_03.gif" width="132" height="21" alt=""><img src="images/b4_03.gif" width="133" height="21" alt=""><img src="images/b5_03.gif" width="132" height="21" alt=""><img src="images/b6_03.gif" width="133" height="21" alt=""><img src="images/b6_03-51.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                <div id="row4"><img src="images/b1_04.gif" width="132" height="21" alt=""><img src="images/b2_04.gif" width="133" height="21" alt=""><img src="images/b3_04.gif" width="132" height="21" alt=""><img src="images/b4_04.gif" width="133" height="21" alt=""><img src="images/b5_04.gif" width="132" height="21" alt=""><img src="images/b6_04.gif" width="133" height="21" alt=""><img src="images/b6_04-58.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                <div id="row5"><img src="images/b1_05.gif" width="132" height="21" alt=""><img src="images/b2_05.gif" width="133" height="21" alt=""><img src="images/b3_05.gif" width="132" height="21" alt=""><img src="images/b4_05.gif" width="133" height="21" alt=""><img src="images/b5_05.gif" width="132" height="21" alt=""><img src="images/b6_05.gif" width="133" height="21" alt=""><img src="images/b6_05-65.gif" width="132" height="21" alt=""><img src="images/spacer.gif" width="1" height="21" alt="">

                                  <div id="row6"><img src="images/b1_06.gif" width="132" height="21" alt=""><img src="images/b2_06.gif" width="133" height="21" alt=""><img src="images/b3_06.gif" width="132" height="21" alt=""><img src="images/b4_06.gif" width="133" height="21" alt=""><img src="images/b5_06.gif" width="132" height="21" alt=""><img src="images/b6_06.gif" width="133" height="21" alt=""><img src="images/b6_06-72.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                  <div id="row7"><img src="images/b1_07.gif" width="132" height="21" alt=""><img src="images/b2_07.gif" width="133" height="21" alt=""><img src="images/b3_07.gif" width="132" height="21" alt=""><img src="images/b4_07.gif" width="133" height="21" alt=""><img src="images/b5_07.gif" width="132" height="21" alt=""><img src="images/b6_07.gif" width="133" height="21" alt=""><img src="images/b6_07-79.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                  <div id="row8"><img src="images/b1_08.gif" width="132" height="21" alt=""><img src="images/b2_08.gif" width="133" height="21" alt=""><img src="images/b3_08.gif" width="132" height="21" alt=""><img src="images/b4_08.gif" width="133" height="21" alt=""><img src="images/b5_08.gif" width="132" height="21" alt=""><img src="images/b6_08.gif" width="133" height="21" alt=""><img src="images/b6_08-86.gif" width="132" height="21" alt=""></div>

                                 

                                 

                                  <div id="row9"><img src="images/b1_09.gif" width="132" height="21" alt=""><img src="images/b2_09.gif" width="133" height="21" alt=""><img src="images/b3_09.gif" width="132" height="21" alt=""><img src="images/b4_09.gif" width="133" height="21" alt=""><img src="images/b5_09.gif" width="132" height="21" alt=""><img src="images/b6_09.gif" width="133" height="21" alt=""><img src="images/b6_09-93.gif" width="132" height="21" alt=""></div>

                                • 13. Re: Does anyone know why my sliced image breaks up in the browswer?
                                  leroyg-vuvxgs Community Member

                                  Thanks Murray

                                   

                                  I was thinking about doing it with the tables as Nancy suggested and I still might have to, but I've added the code you sent me and it almost works fine, but there's one small problem the last colum of players overlap, and leaves the space that the scroll bar occupied and obviously it's also preventing me from centering because of the overlap, is there anyway that I can add a scroll on the end of this block to take up the space? Because with a table I'll obviously be able to merge the last colum/row to accomadate the scroll bar http://inplaylive.com/ 

                                   

                                  Many thanks

                                  Leroy

                                  • 14. Re: Does anyone know why my sliced image breaks up in the browswer?
                                    MurraySummers CommunityMVP

                                    Put all of my code within a div like this -

                                     

                                    <div id="players" style="overflow:scroll;width:940px;height:190px;">

                                    <!-- my code below this line -->

                                    <!-- and above this line -->

                                    </div>

                                     

                                    But why do you need a scrollbar there? Is there more content?

                                    • 15. Re: Does anyone know why my sliced image breaks up in the browswer?
                                      leroyg-vuvxgs Community Member

                                      Thanks Again Murray,

                                       

                                      Yes there is more players about the same again and other content doesn't leave much room, I'll add the code you've sent me tomorrow as it's way past my bed time in the UK I'll let you know how I get on.

                                       

                                      Many Thanks

                                      Leroy

                                      • 16. Re: Does anyone know why my sliced image breaks up in the browswer?
                                        leroyg-vuvxgs Community Member

                                        Mr Murray,

                                         

                                        You are a star! The code you supplied works perfectly, I made a couple of very small ajustments, on row 5 ther was a spacer.gif that I removed (I think I've done the right thing there ) and I wanted to remove the bottom scroll bar and found this online  overflow-y: scroll; or overflow-x: hidden;  

                                         

                                        This has been driving me mad for about 3 days now,  I used to use dreamweaver about 8 years ago and altough things are a lot better and easier if you've been away from it for a long time there's still a lots to learn,  I've even been struggling trying to find the right tools and layouts that I used to use on the GUI

                                         

                                        Thanks again you've been a great help.  http://inplaylive.com/

                                         

                                        Leroy

                                        • 17. Re: Does anyone know why my sliced image breaks up in the browswer?
                                          MurraySummers CommunityMVP

                                          The inplaylive link doesn't help much to see what you've done since it only displays a single image of your players table, not the actual code or the individual images.

                                           

                                          In the future, your fastest way to get GOOD help is to just upload the page and its images and post a link to the uploaded page. You can delete it after the help has been given if you are concerned about leaving an in-progress page on the web.

                                          • 18. Re: Does anyone know why my sliced image breaks up in the browswer?
                                            leroyg-vuvxgs Community Member

                                            Hi Murray,

                                             

                                            Do you mean like this?

                                             

                                            Capture.JPG

                                            <div id="golferselection">

                                             

                                            <div id="players" style="overflow-y:scroll;:scroll;width:944px;height:190px;">

                                             

                                            <div id="row1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-01','','images/c1_01.png',1)"><img src="images/b1_01.gif" width="132" height="21" border="0" id="Golfer-01" /></a><img src="images/b2_01.gif" width="133" height="21" alt=""><img src="images/b3_01.gif" width="132" height="21" alt=""><img src="images/b4_01.gif" width="133" height="21" alt=""><img src="images/b5_01.gif" width="132" height="21" alt=""><img src="images/b6_01.gif" width="133" height="21" alt=""><img src="images/b7_01.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-02','','images/c1_02.gif',1)"><img src="images/b1_02.gif" width="132" height="21" border="0" id="Golfer-02" /></a><img src="images/b2_02.gif" width="133" height="21" alt=""><img src="images/b3_02.gif" width="132" height="21" alt=""><img src="images/b4_02.gif" width="133" height="21" alt=""><img src="images/b5_02.gif" width="132" height="21" alt=""><img src="images/b6_02.gif" width="133" height="21" alt=""><img src="images/b6_02.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-03','','images/c1_03.gif',1)"><img src="images/b1_03.gif" width="132" height="21" border="0" id="Golfer-03" /></a><img src="images/b2_03.gif" width="133" height="21" alt=""><img src="images/b3_03.gif" width="132" height="21" alt=""><img src="images/b4_03.gif" width="133" height="21" alt=""><img src="images/b5_03.gif" width="132" height="21" alt=""><img src="images/b6_03.gif" width="133" height="21" alt=""><img src="images/b6_03.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-04','','images/c1_04.gif',1)"><img src="images/b1_04.gif" width="132" height="21" border="0" id="Golfer-04" /></a><img src="images/b2_04.gif" width="133" height="21" alt=""><img src="images/b3_04.gif" width="132" height="21" alt=""><img src="images/b4_04.gif" width="133" height="21" alt=""><img src="images/b5_04.gif" width="132" height="21" alt=""><img src="images/b6_04.gif" width="133" height="21" alt=""><img src="images/b6_04.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-05','','images/c1_05.gif',1)"><img src="images/b1_05.gif" width="132" height="21" border="0" id="Golfer-05" /></a><img src="images/b2_05.gif" width="133" height="21" alt=""><img src="images/b3_05.gif" width="132" height="21" alt=""><img src="images/b4_05.gif" width="133" height="21" alt=""><img src="images/b5_05.gif" width="132" height="21" alt=""><img src="images/b6_05.gif" width="133" height="21" alt=""><img src="images/b6_05.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-06','','images/c1_06.gif',1)"><img src="images/b1_06.gif" width="132" height="21" border="0" id="Golfer-06" /></a><img src="images/b2_06.gif" width="133" height="21" alt=""><img src="images/b3_06.gif" width="132" height="21" alt=""><img src="images/b4_06.gif" width="133" height="21" alt=""><img src="images/b5_06.gif" width="132" height="21" alt=""><img src="images/b6_06.gif" width="133" height="21" alt=""><img src="images/b6_06.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row7"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-07','','images/c1_07.gif',1)"><img src="images/b1_07.gif" width="132" height="21" border="0" id="Golfer-07" /></a><img src="images/b2_07.gif" width="133" height="21" alt=""><img src="images/b3_07.gif" width="132" height="21" alt=""><img src="images/b4_07.gif" width="133" height="21" alt=""><img src="images/b5_07.gif" width="132" height="21" alt=""><img src="images/b6_07.gif" width="133" height="21" alt=""><img src="images/b6_07.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row8"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-08','','images/c1_08.gif',1)"><img src="images/b1_08.gif" width="132" height="21" border="0" id="Golfer-08" /></a><img src="images/b2_08.gif" width="133" height="21" alt=""><img src="images/b3_08.gif" width="132" height="21" alt=""><img src="images/b4_08.gif" width="133" height="21" alt=""><img src="images/b5_08.gif" width="132" height="21" alt=""><img src="images/b6_08.gif" width="133" height="21" alt=""><img src="images/b6_08.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row9"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer-09','','images/c1_09.gif',1)"><img src="images/b1_09.gif" width="132" height="21" border="0" id="Golfer-09" /></a><img src="images/b2_09.gif" width="133" height="21" alt=""><img src="images/b3_09.gif" width="132" height="21" alt=""><img src="images/b4_09.gif" width="133" height="21" alt=""><img src="images/b5_09.gif" width="132" height="21" alt=""><img src="images/b6_09.gif" width="133" height="21" alt=""><img src="images/b6_09.gif" width="132" height="21" alt=""></div>

                                             

                                             

                                            <div id="row10"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Golfer10','','images/c1_10.gif',1)"><img src="images/b1_10.gif" width="132" height="23" border="0" id="Golfer10" /></a><img src="images/b2_10.gif" width="133" height="21" alt=""><img src="images/b3_10.gif" width="132" height="21" alt=""><img src="images/b4_10.gif" width="133" height="21" alt=""><img src="images/b5_10.gif" width="132" height="21" alt=""><img src="images/b6_10.gif" width="133" height="21" alt=""><img src="images/b6_10.gif" width="132" height="21" alt=""></div>

                                             

                                            </div><!--players-->

                                             

                                            </div><!--golferselection-->

                                            • 19. Re: Does anyone know why my sliced image breaks up in the browswer?
                                              MurraySummers CommunityMVP

                                              <div id="players" style="overflow-y:scroll;width:944px;height:190px;">

                                               

                                              But what I *REALLY* mean is that if you just upload your page and its images to some webspace that you control, and post a link to that page, we can see EVERYTHING we need and avoid these monster long posts with bits of code in them. By not doing that you slow the process down, and hinder our ability to help you comprehensively and accurately.