Skip navigation
Currently Being Moderated

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

Apr 1, 2013 10:36 AM

<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 -->

 
Replies
  • Currently Being Moderated
    Apr 1, 2013 10:45 AM   in reply to leroyg-vuvxgs

    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.htm l

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 11:46 AM   in reply to leroyg-vuvxgs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 12:35 PM   in reply to leroyg-vuvxgs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 1:02 PM   in reply to leroyg-vuvxgs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2013 5:24 AM   in reply to leroyg-vuvxgs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2013 7:47 AM   in reply to leroyg-vuvxgs

    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.


     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2013 8:13 AM   in reply to Nancy O.

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2013 4:11 PM   in reply to leroyg-vuvxgs

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 7:20 AM   in reply to leroyg-vuvxgs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 8:17 AM   in reply to leroyg-vuvxgs

    <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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points