icon_kid - 10:22 pm on Oct 12, 2013 (gmt 0)
Don't wash up yet becaused we're not finished.
Some of the above reply is confusing to me so what I have to do now is PM a few WebmasterWorld members with real samples to see what anyone can make of them.
I tried the 'no-breaks-between-<IMG>s' code form but that ran into a problem from the start, in that the rows of images in my document have tags interspersed among them other than <IMG>, and any tag placed on a line other than another image tag gives the same effect as having a break (a space) between rows; for example:
Two tags on two consectutive lines are said to cause a vertical space betweem them:
Two tags on the same line but with a space between them is said to cause the same thing:
and that placing them end-to-end like this:
<img><img> ... eliminates the space.
However, any tags that are placed between them, even if everything is on the same line, such as this:
<img><X><img>,"X" being any tag at all -- has the same effect as putting them on separate lines or leaving an empty space between them.
The next suggestion was to simply dump the table -- and place the data that was in the table directly into the <DIV> -- that didn't change anything either.
THE SAMPLE DOCUMENTS
In the first URL (BK-Map-01-TEST.html) you'll see a page with a street map background with what looks like a grid pattern of lines over it. Each square that the lines form is actually an individual image though repeated left to right and row upon row. What makes them look like a grid is because only the edges of the image are visable as a 1-pixel line with the rest of it being transparent. Actually, this little image is repeated around thirty-five hundred times. This form of a "blank" image is being used just for test documents so I can verify the pattern they create. The final one will use a completely invisable image whereby some will be replaced with icon images. The page also has one table across the top of it (irrellevant).
The second URL (lucy-2.html) shows two scrollable DIVs side by side. They both contain tables. The table in the right-side DIV contains more DIVs. The problem is that in the first document all the images are ajacent but in the second one there is a 5-pixel space between rows. It all boils down to one simple proposition:
Since the images are ajacent in the first document, there must be a simple way to make the images in the second document behave the same way. Another way of puting it:
Why are there no spaces between rows in the first document whereas spaces do appear in the second document. This question is very staightforward and is supplimented by two real documents for you to examine. There must be a simple fix for this -- not a convoluted one. C'mon, let's smoke this one away.