HTML Forum

**NickH** · 08-14-2010, 05:45 AM

yooo

so once again i have another question concerning the old ways of making websites

this time its about image slicing (cutting an image up and putting it into a table so it will load faster)

my problem at the moment is that when i put all the images in the table i get these white lines that kind of look like padding or even a margin.

so is there a way to get rid of this spacing, i think i've set all margins and padding to 0 but perhaps one of ya'll can give me a hand

heres the code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Joe's Fruit and Vegetables - Splash Page</title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td colspan="0">
                    <img src="images/joes-splash-page_swap_part1x1.jpg" alt="Joes Fruit and Vegetable Splash Page" />
              </td>
                <td>
                    <img src="images/joes-splash-page_swap_part1x2.jpg"  alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part1x3.jpg"  alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part1x4.jpg"  alt="Joes Fruit and Vegetable Splash Page" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/joes-splash-page_swap_part2x1.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part2x2.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part2x3.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part2x4.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/joes-splash-page_swap_part3x1.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part3x2.jpg"  alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part3x3.jpg" alt="Joes Fruit and Vegetable Splash Page" />
                </td>
                <td>
                    <img src="images/joes-splash-page_swap_part3x4.jpg"  alt="Joes Fruit and Vegetable Splash Page" />
                </td>
            </tr>
            </table>
            <table border="0" align="center">
<tr><td>
            <a href="html/home.html">
        <embed src="media/enterButton.swf" type="application/x-shockwave-flash" 
        pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
        </embed>
            </a>
        </td>
        </tr>
        </table>
    </body>
</html>

the attached screen shot shows whats happening

**chrishirst** · 08-14-2010, 07:25 AM

remove the white space before and after the image tags.

**NickH** · 08-14-2010, 08:33 AM

excellent, thanks

while we're here, how about embedding flash - i've been able to embed a button as you can see at the bottom of the code, but how would i go about adding sound, is it the same code but change the source?
and how do i get that code to validate?
i found it over at site point and its what works the course gives an example using this code

Code:

<object type="application/x-shockwave-flash" data="soundfile.swf" width="0" height="0">
        <param name="movie" value="soundfile.swf" />
        <param name="quality" value="high"/>
      </object>

but that didnt work for me is there some way to do it where it will validate to transitional?

**chrishirst** · 08-14-2010, 04:09 PM

There is a pinned thread in this forum on embedding video.

**NickH** · 09:40 AM

that thread is locked and i've got a query about my code that seems to work for one object but not a second :/

make a new thread, or post in this one?

thanks for the advice but that wasnt the issue

**chrishirst** · 08-20-2010, 09:41 AM

If it is a different topic start a new thread in the appropriate forum.

**.master** · 08-30-2010, 09:18 AM

Try this css code

border-collapse: collapse;

**invivomedia** · 03:43 PM

Don't use tables.

removed

**jammydoug** · 09-17-2010, 02:01 AM

Hi
Is image slicing only relevant for table based designs?I`m just confused about why so many computer books labour over how to produced sliced graphics.
It seems like there is very little reason to use slicing if one relies on CS for image positioning.

**NickH** · 09-17-2010, 08:42 AM

slicing is more so to make the images load faster rather than their positioning

**seopackages** · 11-02-2010, 05:05 AM

I think they mean more like using sprites image, which is something that I was too curious. If you have 20 icons, you must use in your application, you can compress a single PNG file that contains all down more than you might if you have 20 different PNG files.

**edgray** · 11-02-2010, 05:18 AM

I have to say that's a pretty terrible solution. Why not just put the image in? Loading it in bits isn't going to improve the user experience very much.