How to stop gap appearing between images in HTML? (Example Inc)?

Question

I put the question on here so you can see the problem.
http://www.doopydoo.com/Table.htm

Please post answer on here if you can fiqure it out and 10 points awaits :)

Answer 1

put the photos in a table with "0" for cell padding, this will make them appear as one. Example

Answer 2

The problem here is that the image itself actually has a 1 pixel border around it. If you open the image up in Photoshop/PaintShop/MSPaint, you can see there's a red box, but then there's a 1 pixel border of white all the way around the image.

So your code is perfect... the images are laying right next to each other... but the images just have a gap built in.

Open your image up in your favorite editing program and crop out that border and you'll be good to go.

Answer 3

They are definatly right, lose the 1 pixel border around the image. Also, sometimes the Doctype on the top of the page will add spacing where you don't want it. Removing it can help that issue.

Answer 4

That's an easy one. You have to reduce the cell padding and cell spacing to 0 (zero). HTML, by default, uses a 1. (Place the colored boxes in a table, not just using a div tag. Tables are easier anyway.)

Answer 5

This one puzzled me so much I copied your files and played with them. There is nothing wrong with your HTML - the problem is the image. Recreate this block without the transparent background and it will lose its border. Don't know why, but it works.

Answer 6

In EACH image tag add the following:

hspace="0" vspace="0" border="0"

the final tag should look like this:



xxx = gif or jpg or png (image format)

Click on my avatar and e-mail me if you need more help.

Answer 7

In each of your image tags add the following style:

style="margin: 0px;"