HTML: Putting images edge-to-edge

I have several images I am trying to “glue” together to form what will appear to be a single image. But the page shows a gap between all the images, instead of putting them edge-to-edge seamlessly.

Is there a way to do this that is consistent with most major browsers?

Make a single image.

What does your HTML look like, and what browsers are you using? This simple code


<html><head></head><body><img src="1.jpg"><img src="2.jpg"></body></html>

gave no spaces between the images for me (recent IE and Mozilla).

Make sure you don’t include any whitespace (including CR/LF!) between your IMG tags. For example, this:


<html><head></head><body><img src="1.jpg">
<img src="2.jpg"></body></html>

will give a space between the two images (they’re thought of as inline with text, separated by a space).

Alternately, you should be able to insert the images into a table, and set all borders and margins to zero; this will let you format the HTML more easily:


<html><head>
<style>
table { border-collapse: collapse; }
td    { border: 0px; padding: 0px; }
</style>
</head><body>
<table><tr>
<td><img src="pic1.jpg"></td>
<td><img src="pic1.jpg"></td>
</tr></table>
</body></html>

If you go with Omphaloskeptic’s table idea (which is what I would have suggested) be sure to format the table cells like s/he shows - the <td> and image tags on one line.

IE, and I think Firefox, will put space around images if they’re not on one line with the cell tags. Not sure why, but they do.

You can also make one picture in a jpeg format that loads the pictures in blocks, and each block is in full resolution. Another jpeg format fills in the details over time. You see a blury image that resolves into a high definition image over time. It’s not the question you asked, but a possible solution for loading a graphics image in an internet friendly manner. You don’t have to worry about multiple files or locational errors leaving spaces between images used for one larger image.

I you use PhotoShop you could also use the slice tool and Save for web to generate the image slices and code. Other image manipulation software may also have a similar feature.

OB

This appears to be the issue. I have line breaks to make the code more readable. I forgot about the inserted space.

The reason I am using multiple images is that some of the images have anchor tags to link to other pages. I guess I could do that with a map instead but I’m too lazy to learn how to do that. :wink:

If you do a table… be sure to set the cellpadding, cellspacing and border attributes to 0 (zero)…

Also, there are hspace and vspace attributes for the image tags that control some amount of whitespace around the images… set them to 0 as well.

and of course, the stylesheet idea from above would also do the trick.