can't stitch images without gaps

GreatWaves · 20 Jul 2012 at 01:25

Can't recall exactly, but I'm sure I've done this (seamless image stitching in html) before long time ago.

I just now made a <table> with zero cellpadding, cellspacing and border. Put images in the cells that should stitch seamlessly together, but they don't. There's about a 2 pixel gap. I even tried putting border to zero in the <img> tag even though that should be zero by default, but still not seamless.

I recall that it's possible to stitch images simply by doing that.

Ideas?

mp3duck · 20 Jul 2012 at 07:53

hmm, why not just have one image?
Wasn't the point of "stitching" images because of low bandwidths, that meant people didn't want to download single large files?

GravyMonster · 20 Jul 2012 at 08:52

Put cellpadding="0" and cellspacing="0" on the table.

This isn't a good technique to be using though, as mp3duck said.

GreatWaves · 20 Jul 2012 at 09:33

Spunkey said:
Put cellpadding="0" and cellspacing="0" on the table.

This isn't a good technique to be using though, as mp3duck said.

See first post. I did that right from the beginning. I'm stitching row by row, with one column. The seam between rows just doesn't go away.

This isn't about the loading speeding of an image (in fact it's never displayed all at once). It's about dynamically displaying an image in very variable portions. It's hard to explain.

Cheers

GravyMonster · 20 Jul 2012 at 09:40

Without seeing your HTML I'm guessing, but it sounds like a hangover from the images being inline and having whitespace between them in your code. Try adding 'table img { display: block; }' to you css.

GreatWaves · 20 Jul 2012 at 09:59

Spunkey said:
Without seeing your HTML I'm guessing, but it sounds like a hangover from the images being inline and having whitespace between them in your code. Try adding 'table img { display: block; }' to you css.

Thanks for help. I tried that directly via the Style attribute in the <table> tag, and then through the <tr> and <td> tags, but nothing changed. I had not considered that there might be a style attribute that could effect the behavior.

edit: Regarding whitespace in code, I also tried pulling all <tr> and <td>'s to one single line, but still get the seam.

I think though that this is being caused by the way images are display by html, not by the table. As experiment I tried simply displaying two pieces of a chopped image one above the other just with two <img> tags and got a seam between them. I even tried setting Border to zero within the <img> tag (even tho that should be zero by default).

Cheers

GreatWaves · 20 Jul 2012 at 10:17

Spunkey said:
Without seeing your HTML I'm guessing, but it sounds like a hangover from the images being inline and having whitespace between them in your code. Try adding 'table img { display: block; }' to you css.

Thanks! Using the display:block style attribute in the <img> tags solved the problem