www.webdeveloper.com
Results 1 to 4 of 4

Thread: HELP: Space between Sliced Images

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    2

    Unhappy HELP: Space between Sliced Images

    I've created an HTML site using sliced images that I exported from Photoshop. Sometimes when I view it in a browser there are very thin white lines between the images. It's seven images in a horizontal line which make up the navigation bar. I think it has to do with them being in a table format. However, I don't know how to fix the problem. Can you help?? (see code below)
    ------------------

    <td colspan="17">
    <img src="../images/Optimized-Header.gif" width="1002" height="188" alt="logo header"></td>
    <td>
    <img src="../images/spacer.gif" width="1" height="194" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img src="../images/white-space-top-left.gif" width="44" height="45" alt=""></td>
    <td colspan="16">
    <img src="../images/Creekside-Layout-Final_03.gif" width="956" height="1" alt=""></td>
    <td>
    <img src="../images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="3"><a href="../creekside_homepage.html"><img src="../images/about-btn1.gif" width="157" height="44" alt="about"></a></td>
    <td colspan="3"><a href="../steam_and_sauna_page.html"><img src="../images/steam-and-sauna-btn2.gif" width="233" height="44" alt="steam and sauna"></a></td>
    <td colspan="3"><a href="../creekside_hot_tubs_page.html"><img src="../images/hot-tubs-btn3.gif" width="162" height="44" alt="hot tubs"></a></td>
    <td colspan="3"><a href="../creekside_rentals_page2.html"><img src="../images/rentnals-btn4.gif" width="151" height="44" alt="rentals"></a></td>
    <td colspan="3"><a href="../creekside_contact_page.html"><img src="../images/contact-us-btn.gif" width="211" height="44" alt="contact us"></a></td>
    <td>
    <img src="../images/white-space-top-right.gif" width="42" height="44" alt=""></td>
    <td>
    <img src="../images/spacer.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>

  2. #2
    Join Date
    Dec 2011
    Posts
    32
    This has to do with the width of table cell border, or padding.

    In your TABLE tag, add following:

    Code:
    <table cellspacing = "0">
    In addition, try adding this CSS code into your style.css, externally:

    Code:
    table
    {
        border:0; border-collapse: collapse;
    }
    table td
    {
        padding:0;
    }
    or, internally, right before table tag:

    Code:
    <style>
    table
    {
        border:0; border-collapse: collapse;
    }
    table td
    {
        padding:0;
    }
    </style>
    
    <table ...

  3. #3
    Join Date
    Dec 2011
    Posts
    2

    Unhappy

    Hi, Thank you so much for responding, as this problem has be royally stumped.

    I've done what you told me to, however, none of these options are making a difference. Can you think of any other solutions? Here's the link to the site (see the navigation bar): [URL="http://creeksidehottubs.com.sitepreview.mysuperpageshosting.com/creekside_final_layout/creekside_homepage.html

    You are right, in that the cell spacing and padding seems to def. be the issue but even when I bring it down to "0", there remains a very slight white border.

  4. #4
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by Merry1084 View Post
    Hi, Thank you so much for responding, as this problem has be royally stumped.
    The W3C html validator spits out 11 errors for the url you posted.

    Fix those first, and if pain persists post back . I don't see any point in wasting time with invalid html code.
    Last edited by webdev1958; 12-16-2011 at 07:42 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles