Javascript-форум - Неправильное отображение...

Javascript-форум (https://javascript.ru/forum/)

- Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)

- - Неправильное отображение... (https://javascript.ru/forum/css-html-firefox-mizilla/3660-nepravilnoe-otobrazhenie.html)

Неправильное отображение...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<style>

#fog {
position: absolute;
display: none;
top: 0;
left: 0;
background-color: #fff
}

#modalbox {
width: 200px;
height: 150px;
position: absolute;
display: none;
z-index: 2
}

</style>

<script type="text/javascript">

var modalbox;
var scrollWidth;
var scrollHeight;

window.onload = function() {

modalbox = document.getElementById("modalbox");

scrollWidth = document.body.scrollWidth;
scrollHeight = document.body.scrollHeight;

document.getElementById("fog").style.width = scrollWidth;
document.getElementById("fog").style.height = scrollHeight;

}

function showModalbox() {

document.getElementById("fog").style.filter = "alpha(opacity=80)";
document.getElementById("fog").style.opacity = 0.8;
document.getElementById("fog").style.display = "block";

modalbox.style.display = "block";

modalbox.style.left = Math.round(scrollWidth / 2) - 200;
modalbox.style.top = document.body.scrollTop + 250;

}

function cancelModalBox() {
document.getElementById("fog").style.display = "none";
modalbox.style.display = "none";
}

function showImages() {
document.getElementById("currentImg").value = "1";
showModalbox();
}

function nextImage(cmd) {
var currentImg = document.getElementById("currentImg");

if (cmd == "next") {
if (!currentImg.value == 5) {
currentImg.value = parseInt(currentImg.value) + 1;
}
} else {
if (!currentImg.value == 1) {
currentImg.value = parseInt(currentImg.value) - 1;
}
}

document.getElementById("dynamicImg").src = "images/0" + currentImg.value + ".jpg";
}

</script>

<head>
<title>My web site</title>
</head>

<div id="currentImg"/>

<input type="image" src="buttons/images.gif" height="40" width="80" onClick="showImages()">

<div id="modalbox">

<div id="body">
<table width="100%">
<tr>
<td align="right" colspan="3">
<input type="image" src="buttons/close.gif" onclick="javascript:cancelModalBox()">
</td>
</tr>
<tr>
<td>
<input type="image" src="buttons/left arrow.gif" onClick="javascript:nextImage('previous')">
</td>
<td>
<input type="image" id="dynamicImg" src="images/01.jpg" width="200" height="150">
</td>
<td>
<input type="image" src="buttons/right arrow.gif"
onClick="javascript:nextImage('next')">
</td>
</tr>
</table>

</div>

</div>

<div id="fog"/>

</html>

Имеется такая страничка. Проблем несколько.
1. При нажатие на кнопку (images) выскакивает окошко но оно выскакивает почему то у левой стенки хотя в скрипте задается координаты примерно посередине окна.
2. При нажатие на кнопку так же должен "ложиться туман" <div id="fog"/> однако почему то его размеры остаются нулевыми. В итоге он ничего не покрывает.
3. В появившемся окошке есть стрелочки но при нажатие на них срабатывает скрипт nextImage() однако почему то в нем значение currentImg.value не увеличивается и не уменьшается.
Может я не те аттрибуты меняю, но что то никак не получается.

а теперь то же самое с тэгом html (кнопка <> на панели инструментов) и с отсутупами (можно просто отредактировать пост)

Цитата:

Сообщение от JustFriend

1. При нажатие на кнопку (images) выскакивает окошко но оно выскакивает почему то у левой стенки хотя в скрипте задается координаты примерно посередине окна.
2. При нажатие на кнопку так же должен "ложиться туман" <div id="fog"/> однако почему то его размеры остаются нулевыми. В итоге он ничего не покрывает.
3. В появившемся окошке есть стрелочки но при нажатие на них срабатывает скрипт nextImage() однако почему то в нем значение currentImg.value не увеличивается и не уменьшается.
Может я не те аттрибуты меняю, но что то никак не получается.

1. Где там какое окошко в скрипте? Не увидел ни одной строчки с заданием координат.
2. А размерность дядя задавать будет? Значение document.getElementById("fog").style.width = scrollWidth; присвоено. а размерность не указана.
<div id="fog"/> Фигасе, кто научил так тег div закрывать?
3. <div id="currentImg"/>, далее currentImg.value = parseInt(currentImg.value) + 1; Откуда у дива value???

А нашёл строки с заданием координат окошка:
modalbox.style.left = Math.round(scrollWidth / 2) - 200;
modalbox.style.top = document.body.scrollTop + 250;

Тоже нет размерности...

Цитата:

Сообщение от ZoNT

<div id="fog"/> Фигасе, кто научил так тег div закрывать?

Я сам так не делал, но всегда думал, что так валидно. Разве нет? Валидатор даже предупреждение не выдает.

Тег base, например, даже в html описан как одиночный, но, тем не менее, его лучше закрывать тегом </base>, иначе ИЕ6 с ума сходит.

Цитата:

Я сам так не делал, но всегда думал, что так валидно. Разве нет? Валидатор даже предупреждение не выдает.

для какого DOCTYPE? Это нужно для того чтобы вроде как и xml разметку сделать, и чтобы старые браузеры тебя поняли - http://www.w3.org/TR/xhtml1/#C_2

Цитата:

Сообщение от x-yuri

старые браузеры тебя поняли

Я сначала написал, а уже потом про древние браузеры вспомнил. Действительно, в них <div /> будет понят, как только открывающий тег (не закрытый) и все стили, примененные к нему, будут действительны во всем (не совсем во всем вообще то) остальном html. Пробел в <br /> как раз для таких браузеров добавляется.

Цитата:

Сообщение от ZoNT (Сообщение 18800)

Размерность задается в CSS

#modalbox {
width: 200px;
height: 150px;
position: absolute;
display: none;
z-index: 2
}

Цитата:

Сообщение от ZoNT (Сообщение 18799)

Если это не размерность,
document.getElementById("fog").style.width = scrollWidth;
document.getElementById("fog").style.height = scrollHeight;

то как тогда её задавать?