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