Unwanted Spaces Between Rows Of Images

[icon_kid]

For my "Brooklyn Mapping" project there were three obstacles to overcome. The first one was how to do multiple image swaps using check boxes, which was solved by fotiman. The second was how to have two (or more) tables sit side-by-side and be scrollable (though this effect uses plain/unscrollable tables within scrollable DIVs), which was solved by lucy24. The third and last hurtle is to close the 5-pixel space that appears between rows of images.

The following code renders three rows
-- each row has five images.

<nobr>
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
</nobr><br>

<nobr>
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
</nobr><br>

<nobr>
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
</nobr>

A diagramatical representation of how this code renders is this:
(fifteen images arranged in three horizontal rows, however with space between rows
-- even though the default 'VSPACE' around images is supposed to be ZERO.

|******|******|******|******|******|
|******|******|******|******|******|
|******|******|******|******|******|

|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|

|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|

---------------------------------------------------------

By searching the matter I found a tip from one author -- that putting each row in a <DIV> will clap them all together solid.
This is the amended code:
(minus the <br> tags which are not necessary here because the DIVs automatically cause line breaks at their ends):

<div class="row"><nobr>
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
</nobr>
</div>

<div class="row"><nobr>
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
</nobr>
</div>

<div class="row"><nobr>
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
</nobr>
</div>

Terrific! -- the DIVs collapsed the spaces so the rows look like this:

|******|******|******|******|******|
|******|******|******|******|******|
|******|******|******|******|******|
|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|
|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|

---------------------------------------------------------

... but my final problem is this:
The DIVs need to be contained in a table, however, when they are placed within a table they somehow become inate, meaning that they lose whatever power they had to close the gaps between rows, and the 5-pixel spaces return. The code looks like this:

<table>
<tr>
<td>
<div class="row"><nobr>
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
<img src="asterisk.png">
</nobr>
</div>

<div class="row"><nobr>
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
<img src="pound.png">
</nobr>
</div>

<div class="row"><nobr>
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
<img src="angstrom.png">
</nobr>
</div>
</td>
</tr>
</table>

...and goes back to looking like this again:

|******|******|******|******|******|
|******|******|******|******|******|
|******|******|******|******|******|

|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|
|#####|#####|#####|#####|#####|

|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|
|@@@@|@@@@|@@@@|@@@@|@@@@|

So my basic question is:

Why do DIVs close gaps between rows when not in a table, but fail to close gaps when placed in a table?
More important to me than why, is: how do I alter the code to force rows of images to always be adjacent?

The suggestion that the FONT SIZE in the document body has something to do with this has already been tested with no effect. Can anyone suggest something else to try?

I placed this post in the CSS Section because I think that the solution will ultimately be a CSS one, but I'm not sure on that.

[icon_kid]

Just not a good enough reason to go back to the "crap" you had before.

Yes, you're right. I didn't really go back to it -- yet. A friend is helping me with the project -- to keep going with the latest scheme.

Why would you want the html structure be so that you need a "separate DIV" for the client list ?
And what do you mean by "separate DIV", cause it *is* in a div of it's own...

I'm not even keen on what a DIV is. DIVs were suggested as a way to "compartmentalize" the two fields the page should have, while also side stepping the limitations of tables. The layout is basically the same as a Google My Map. A Google My Map has two fields (which we'll call "columbs") -- a narrow one on the left containing the names and addresses of locations, and one on the right containing a street map image which fills the remainder of the browser window's width. When the list in the left columb becomes longer than the browser window, it overflows with the appearance of a scrollbar. The column with the map image has vertical and horizontal scroll bars from the start because the image it holds is around 4000 X 3000 pixels. Of course, in a Google map (or any other type of spherical map) it has no beginning and no end, so scrollbars are not applicable. Instead, a 'move' tool (looking like a hand) or 'panning' arrows are used to move the map around. However it's termed, and whatever tags need to be used, be they <TABLE>, <DIV> or <ZOINK>, I need to have two separate, independently scrolling areas of the Web page for the same reason that Google does, as well as any webmaster who can use this kind of common, simple, handy, functional layout.

Did you try just removing the float on .clientList and replacing it with position:fixed and positioning it where you want it on the screen ?

No, I didn't get to try that -- I though about it, though. I realized that, even though the client list would remain fixed, it would still partially cover the map image unless the map was in its own container.

Well, CSS is CSS and javascript is javascript. Styles have to go in a stylesheet.

Guess I should've asked the one who gave it to me, "what is it, and where do I put it?
It was something to force the collapse of spaces between rows of images in my original scheme using thousands of place holders as a method of positioning images. As yet, no one has provided a solution to that question. I'm on a new course to make the page I want but, as I've saved that version of the document, I'd be interested to hear a suggestion on how I would have correctly applied that snippet -- and make the spaces collapse -- and I would test the code too, for my own satisfaction. That was the original issue in this thread even though I've advanced to better schemes for making my project -- with the help of all of you.

[lucy24]

I'm not even keen on what a DIV is.

It's an armature. Or matrix.

There are two html elements that do nothing on their own; they exist only as something to attach styles to. The block-level version is called a div ("division", I assume, but the word doesn't exist in un-condensed form). By default it creates line breaks before and after, sort of like a <p> paragraph. The inline version is called a span. By default it doesn't create line breaks, sort of like <i> or <b> and similar markup.

Just to confuse you, a "hard" line break <br> is considered an inline element, meaning that you can put it inside of anything you like. It's really just another character.

<style type = "text/css">
.locked {white-space: nowrap;}
</style>

By default, anything in html drops to a new line when it runs out of room. That's why this page isn't eight miles wide. The "nowrap" directive is one way to override this default behavior. It may correctly be {whitespace: no-wrap;}. I rely on the text editor's syntax highlighting. If it doesn't change color, I spelled it wrong.

Guess I should've asked the one who gave it to me, "what is it, and where do I put it?"

I wish the people who wrote the Lilypond manual understood this. "Yes, OK, I have to say tempoWholesPerMinute = #(ly:make-moment 120 4) ... but where do I say it?"

[swa66]

it overflows with the appearance of a scrollbar.

To make overflows appear as a scrollable window:
- you first need to make sure the thing itself has a "fixed" size (so that it does not expand with it's content.
That can be done by setting height, or by fixing top and bottom using positioning
- then you set "overflow: scroll" in the css.
In CSS3 you can set the x and y scroll independently.

To make 2 columns that are independently scrollable is equally simple: position them where you need them. To use the finesse: make sure to use the browser's scrollbars in a smart way as not all browsers hide their scrollbars when not in use.
e.g. in this case:
- put the map on the page itself, leave a space wide enough for your list
- use the browser's scrollbar for this area
- make the list have position:fixed; top:0; bottom:0; a width to fit in the margin you left and give in overflow-y:scroll (if you only support recent browsers, otherwise you're stuck with overflow:scroll)

No, I didn't get to try that -- I though about it, though. I realized that, even though the client list would remain fixed, it would still partially cover the map image unless the map was in its own container.

You can move the content out of the way of a positioned child by simply using padding or margins.

That's it.

[icon_kid]

There are two html elements that do nothing on their own...(DIV & SPAN)
...block element...inline element...

Thanks for a clear explanation. The explanation leads me to another question:
Since SPAN is naturally INLINE, why did you use DIV for the layout you made for me -- you still made the pair of DIVs sit side-by-side somehow (against their nature to stack vertically like BLOCK elements).

Just to confuse you, a "hard" line break <br> is considered an inline element, meaning that you can put it inside of anything you like. It's really just another character.

No, you didn't throw me on that one only because I've used it so much over many years -- another way of expressing the behavior of a <BR> is that it breaks a line no matter where in the document BODY you put it."

<style type = "text/css">
.locked {white-space: nowrap;}
</style>

Should this be a separate CSS (with a 'relative link' in the document) or does it go in the document itself?

By default, anything in html drops to a new line when it runs out of room.

Glad you mentioned that -- it highlights my point that (in 2013) a NOBR tags still prevents a line from breaking even if the line runs out of room, if that is what you want.

To make overflows appear as a scrollable window:
- you first need to make sure the thing itself has a "fixed" size (so that it does not expand with it's content.
That can be done by setting height, or by fixing top and bottom using positioning
- then you set "overflow: scroll" in the css.
In CSS3 you can set the x and y scroll independently.

This stuff is a bit confusing to me, but I can narrow down the format to this:
The two columns in the document can not expand -- that is because they are already extended to the limits of the browser window -- a thing can not grow any taller if it is already as tall as it can possibly be. If you look at a Google My Map you'll see two columns. The dimensions of them are not fixed -- they both fill the height of the browser window no matter what that height is, and the scroll bars occur whenever there is an overflow of content.

...not all browsers hide their scrollbars when not in use...

For this project the content will always exceed the size of the browser window, so scroll bars will always be present.

[lucy24]

Since SPAN is naturally INLINE, why did you use DIV for the layout you made for me -- you still made the pair of DIVs sit side-by-side somehow (against their nature to stack vertically like BLOCK elements).

That's where the word "default" becomes important. If an element contains other stuff, but you want it to sit side-by-side with another element, you specify

{display: inline-block;}

in the css. Depending on what you say about the element width and maybe other features, an inline-block may either always go side by side with another one, or it may drop down to a separate line if there isn't room for it. In other words, just like individual words overflowing a line-- except that "inline-block" means it can contain other block-level elements such as tables, paragraphs or other divs. (Divs and spans can each be nested* infinitely. Paragraphs can't. Lists can be nested. Tables can be nested, but that way lies madness.)

A style sheet is delimited by

<style type = "text/css">
{blahblah}
</style>

:: pause here for quarrel about whether "type='text/css'" is even necessary now that w3c has thrown up its hands and decided there can't be any other types ::

Within those tags you can put as many separate declarations as you want. By default-- there's that word again-- a stylesheet goes in the

<head>

section of a document. (It can theoretically also go in the body. I had to do this once for something involving javascript that wouldn't work in the <head>, but I wasn't happy about it.) But if you have more than one document using the same styles-- as most websites do if they've got more than one page-- you will prefer to use an external stylesheet. For this one, the <head> includes a single line like this

<link rel = "stylesheet" type = "text/css" href = "mystyles.css">

:: pause for same argument about "type" ::

Note the "rel='stylesheet'" part. If your pages go in packages, where each directory uses its own styles, you can use relative links. Otherwise use a site-absolute link with leading / slash.

Note further that if you are testing this locally, without any kind of server, the browser can only read relative links. It can't find URLs beginning in / slash. (The browser also can't find unnamed index files-- the kind with trailing / slash-- but depending on your OS and/or browser you may at least get as far as a directory index.)


* If you ever use Tidy, it will kick up a fuss about nested spans. Ignore it.

[icon_kid]

...an inline-block may either always go side by side with another one, or it may drop down to a separate line if there isn't room for it.

I never tested that before -- I narrowed the width of the browser window and then one DIV dropped below the other one. My question is:
How do I make the two DIVS always stay side-by-side no matter how the browser is resized?

Here is a test code (designed by lucy24) for a complete document containing a pair of DIVs:

<!DOCTYPE html>
<html>
<head>
<title>lucy-6</title>

<style type = "text/css">
.locked {white-space: nowrap;}
</style>

</head>
<body>
<div style = "height: 720px; overflow: auto; width: 200px;
display: inline-block; background-color: #CDC;">
<table style = "width: 200px; height: 720px; border: 2px solid #82a3d2; background-color: #C1D2EC;">
<tr>
<td>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></td>
</tr>
</table>
</div>
<div style = "height: 720px; overflow: auto; width: 960px;
display: inline-block; background-color: #CDC;">
<table style = "width: 960px; height: 720px; border: 2px solid #82a3d2;">
<tr>
<td><div class="row"><nobr>
<table>
<tr>
<td>
<div class="row"><nobr>
<img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"/>
</nobr>
</div>

<div class="row"><nobr>
<img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"/>
</nobr>
</div>

<div class="row"><nobr>
<img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"
/><img src="blank.png"/>
</nobr>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Again, the purpose of this test document is two-fold.
1) Without changing it in any drastic way, make the pair of DIVs stay side-by-side regardless of window resizing. This would be similar to what a NOBR does -- puting NOBR around a thoughsand words of text makes all the words appear on a single line -- they can not break into multiple lines regardless of window resizing.
2) Collapse the 5-pixel space between the three rows of images in the second DIV.
To that end, this:

<style type = "text/css">
.locked {white-space: nowrap;}
</style>

...was placed in the HEAD but does nothing.
Please test this document, and find a small image (preferably less than a hundred pixels per side) and re-name it "blank.png" to use for the test. I'd prefer not to see any suggestions unless this original code as well as the suggested code has been personally tested by the person making the suggestion.

[lucy24]

How do I make the two DIVS always stay side-by-side no matter how the browser is resized?

Either set their width as a percentage, allowing a little fudge room for margins, or change to
{display: table-cell;}
... at which point you will leap up and protest "But it started out as a table and everyone said I had to change it!"

The two nice things about {display:table-cell;} assuming the browser recognizes the form are
#1 consecutive elements set to "table-cell" always show up on the same line, just like-- ahem! --cells in a single row of a table
#2 the vertical alignment behaves the way you want it to

I forgot to say that an external stylesheet contains only the styles. No before-and-after tags such as <style>. This is another of those things the tutorials always assume you know :)

...was placed in the HEAD but does nothing.

Was it inside <style> tags?

It never hurts to run things through the validator now and then. Here's the trio of bookmarks:

HTML: [validator.w3.org...]
CSS: [jigsaw.w3.org...]
links: [validator.w3.org...]

The first two include the #validate_by_upload tab, which the Forums will probably eat.

[icon_kid]

Was it inside <style> tags?

Yes.

It never hurts to run things through the validator now and then. Here's the trio of bookmarks:

Thanks for the bookmaks and the rest of the suggestions, but now I'm going with another altogether different script -- one that's superior to all the other ones I've tried so far. It doesn't use thousands of image place holders, it uses a 'Hide' script instead of a 'Swap' script, and it even has a neat way of calling for a duplicate of an image to be used in other parts of the document without having to create a separately named image (which I'd resorted to for previous scripts), and the extra images are called "siblings." It leaves only one thing to be perfected.

The icons are toggled on and off using check boxes. The check boxes have their own field on the page, and it looks like a column. The icons that get toggled appear on another field having a "street map" background image, however, the Client List lies inside of the map -- it needs to be in its own field. In the graph below the pound sign represents the street map; the ampersands represents the column of check boxes, which includes other types of data as well (some text and 'sibling' images), altogether comprising the "client list." The Client List also scrolls with the Map which is not the desired layout.

##########################
##@@@@@###################
##@@@@@###################
##@@@@@###################
##@@@@@###################
##@@@@@###################
##@@@@@###################
##@@@@@###################
##########################


The layout needs to be like this:

@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################
@@@@@@@###################

-- the Client List occupying an area of its own, independently scrollable and taking up the full height of the browser window just as the Map column does.

Can anyone suggest how to modify the code below in order to do that?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brooklyn Map</title>
<style type="text/css">
html {
scrollbar-3dlight-color:#C6C6C6;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#5A5A5A;
scrollbar-track-color:#1F1F1F;
scrollbar-highlight-color:#808080;
scrollbar-shadow-color:#484848;
scrollbar-darkshadow-Color:202020;
}
/* Moved all presentational attributes out of body element. */
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
/* This container has the map background. It has been sized to the
* dimensions of the background image. It has position relative so
* absolutely positioned images that get placed on the map are relative
* to this container. */
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1567px;
height: 1415px;
overflow: auto;
position: relative;
}
/* This container has the client list. It is positioned within the map
* container. */
.clientList {
background-color: #b5c7e0;
border: 2px solid #93a6bc;
float: left;
margin: 1em;
width: 200px;
}
/* This is the list of clients. List markers have been removed. */
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
/* This is the list item which contains client info. */
.clientList li {
padding: .5em;
}
/* Moved all presentational attributes out of body element. */
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mapContent">
<div class="clientList">
<ul>
<!--
Use this as a template. Each list item must be in this format:
<li>
<input type="checkbox">
<img src="..."
alt="..."
data-position-top="..."
data-position-left="...">
Client Name
<div>Client Address</div>
</li>
The only requirement is that there is a checkbox that is followed
by an img sibling, and that img element needs to have a src
attribute, data-position-top attribute (containing the top
coordinate for the location on the map to show this), and
data-position-left attribute (containing the left coordinate for
the location on the map to show this). The alt attribute is
recommended but not required.
-->
<li>
<input type="checkbox">
<img alt=""
src="client1.png"
data-position-top="500px" data-position-left="500px">
Client 1
<div>Address 1</div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="client2.png"
data-position-top="300px" data-position-left="250px">
Client 2
<div>Address 2</div>
</li>
</ul>
</div><!-- clientList -->
</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function () {
/**
* Given an image, create a copy and position it on the map using the
* data-position-top and data-position-left attributes of the image.
* This will insert the new image immediately after the one passed in
* but because it's absolutely positioned will appear on the map.
*/
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
/**
* Given an image, remove the next sibling image (which was created in
* the showOnMap function) from the DOM.
*/
function hideFromMap($img) {
$img.next('img').remove();
}
/* Attach a click handler to the clientList container that will trigger
* for each checkbox element within the clientList. */
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
</body>
</html>


-- The URL to this test document has been sent to certain WebmasterWorld members for their reference --