Forum Moderators: open
the question of how to [e]liminate empty space around images
Don't be using non-standard elements like <nobr>.
img {margin: 0; padding: 0;}
I don't know how or why the presence of DIV tags eliminates the space between rows but when something works for you, you are usually not interested in knowing exactly why
Why is it five pixels anyway?
p {margin-left: 0px; margin-right: 0px; display:inline;}
Also, nothing changed after I removed the closing slashes so I'll leave it that way.Because browsers will make wasted effort to correct your error instead of doing their job. It's part of what's called "tag soup".
I don't know how or why the presence of DIV tags eliminates the space between rows but when something works for you, you are usually not interested in knowing exactly why -- it's when something is not working that you strongly focus on it.Speak for yourself.
{white-space: nowrap;}
Line height is determined by the current font size...
What if the viewport dimensions call for narrower wrapping?
Why is this here?p {margin-left: 0px; margin-right: 0px; display:inline;}
The reason is div elements are block level...
...it may turn out that the reason it works is different from what you thought, and then if you change something seemingly unrelated it stops working.
{white-space: nowrap;}
Line height is determined by the current font size...
What if the viewport dimensions call for narrower wrapping?
Why is this here?p {margin-left: 0px; margin-right: 0px; display:inline;}
The reason is div elements are block level...
...it may turn out that the reason it works is different from what you thought, and then if you change something seemingly unrelated it stops working.
They need to be 50 to a row and then break off to start the next row of 50.
<snip>
The background image is 1367 X 1465 -- larger than most screen resolutions. When the page loads, scrollbars appear automatically. The page is meant to be scrollable
I changed the font size from 3 to 1
...sounds absolutely atrocious from the usability angle...
font drop downs
document.getElementById('sussman').style.visibility=(chk.checked)?'visible':'hidden'; }
I can't have the appearance of an image cause a shift in the position of other images.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
(function () {
var container = document.getElementById('container'),
imgList = container.getElementsByTagName('img'),
i,
n;
function createCheckbox(index) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.value = index;
container.appendChild(checkbox);
}
function checkboxClickHandler(e) {
var target = e ? e.target: window.event.srcElement;
if (target.nodeName.toUpperCase() != 'INPUT' &&
target.type.toUpperCase() != 'CHECKBOX') {
return;
}
// toggle visibility of the image
// When checkbox is checked, image becomes hidden, and vice versa
imgList[target.value].style.visibility = (target.checked ? 'hidden': 'visible');
}
// Generate checkboxes
for (i = 0, n = imgList.length; i < n; i++) {
createCheckbox(i);
}
// Attach event handlers
container.onclick = checkboxClickHandler;
})();
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
#container div {
white-space: nowrap;
}
<form style='display:inline;'
action="JavaScript:void(0);"
And, technically, the C in onClick and onChange, etc. should be capitalized, but browsers don't seem to care too much
1. It's best to avoid inline style attributes, as it makes maintenance more difficult, adds to your page weight that won't be cached, and prevents a clean separation of layers (content/presentation/behavior).
2. I've found it's usually not a good idea to style the form element itself, but rather style some container element within the form. I don't remember the specifics, but I had some problems a few years back with browser inconsistencies (so it may not be an issue still). In any case, I try to avoid directly applying presentation to a form.
Technically speaking, there is no official "JavaScript:" protocol. Browsers handle it, but the result is that you're mixing behavior into your markup, so I'd advise against it.
Well, now you say so. You mean you never wanted
{display: none;} at all? Why didn't you say so in the first place?
You want the entirely different property {visibility: hidden;}
This becomes a heck of a lot easier to code, because it really is a toggle: "hidden" or "visible" and that's all.
Remove the 'type="text/css" ' which hasn't been needed in years.
I certainly didn't say anything in those terms
What do I replace that with.
That's because all of the 'map' portion of the page will eventually be placed inside of a table.
