Как такое сделать в IE ?

Konstantin S. · 30.06.2006, 19:55

Добрый день.

Вот такой вот вопросик есть к участникам форума...
Имеем вот такой HTML файл:

Код HTML:

<html>
<body style="border: 1px dashed #999;">
<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>
<div style="background-color: #99F;">NORMAL DIV</div>
</body>
</html>

В браузере видим такую картинку:

Теперь добавляем в заголовок вот такой стиль:

Код:

html {margin-top: 100px;}

FireFox показывает вот так:

(то есть, он весь контент сместил вниз).

А вот в Internet Explorer вниз смещается весь контент, кроме абсолютно позиционированного слоя (ABSOLUTE DIV).

Не знает ли кто-нибудь, как сделать, чтобы в IE вниз сместилось все ?

Заранее спасибо.

KidsKilla · 30.06.2006, 22:12

никак. создать див{позишн:релатив}
и внутри него уже рулить его же и маргином награждать

Konstantin S. · 30.06.2006, 22:46

То есть засунуть все, что между <body> </body> в отдельный <div> ?
Хммм... А все равно div'ы с position:absolute не сместятся...

Хотя, я тут кое-что уже "нарыл"...
Вот:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { position: relative; margin-top: 100px; }
</style>
</head>
<body style="border: 1px dashed #999;">
<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>
<div style="background-color: #99F;">NORMAL DIV</div>
</body>
</html>

Если вставить DOCTYPE в шапку, то, вроде, содержимое съезжает вниз. Однако, слои наложены друг на друга. А так быть не должно...

KidsKilla · 05.07.2006, 04:05

не просто дмв, а див{позишн:релатив}

> Хммм... А все равно div'ы с position:absolute не сместятся...

попробуй сперва, потом говори.

All87 · 05.07.2006, 15:09

если ниче не получается (или просто впадлу чтобы получалося), просто сделай так:
1. margin-top присваиваеш body
2. перед </body> вставь

Код:

<script>
	bd=document.body.style.marginTop;
	dv=document.getElementsByTagName('div');
	for (i=0; i<dv.length; i++)
	{
		if (dv[i].style.position=='absolute')
		{
			if(dv[i].style.top)
			{
				dvI=dv[i].style.top;
				dv[i].style.top=(dvI.replace('px','')*1)+(bd.replace('px','')*1);
				alert(dvI);
			}
		}
	}
</script>

Чикс и готово

All87 · 05.07.2006, 15:11

блин! забыл в предыдущем коде алерт убрать, так что сделай это сам

просто убери -- alert(dvI);

Konstantin S. · 06.07.2006, 09:38

Цитата:

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

не просто дмв, а див{позишн:релатив}

> Хммм... А все равно div'ы с position:absolute не сместятся...

попробуй сперва, потом говори.

Снимаю шляпу перед Вами.

Вот такой код:

Код HTML:

<html>
<head>
<style type="text/css">
/* body { position:relative;left:0px;top:100px; background-color: #CFC; } */
</style>
</head>
<body style="border: 1px dashed #999;">

<div style="position:relative;margin-top:100px;">

<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>
<div style="background-color: #99F;">NORMAL DIV</div>
<div>TEST TEST TEST</div>

</div>

</body>
</html>

Работает как мне надо. Отдельными строками выделен див, про который Вы писали. Единственное, я не могу понять, почему это работает ?

Konstantin S. · 06.07.2006, 09:43

Цитата:

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

если ниче не получается (или просто впадлу чтобы получалося), просто сделай так:
1. margin-top присваиваеш body
2. перед </body> вставь
[code]...[СODE]

Чикс и готово

Я как раз этот вариант оставил на потом. Идея с дивом мне больше нравится, так как меньше писанины.

KidsKilla · 06.07.2006, 21:20

работает потому что у родителя относительное позиционирование. (по умолчанию -- статическое) позишн релатив кроме прочего нужен как раз для того чтобы вложеные элементы с абсолютной позицией отсчитывались от этого элемента.

Konstantin S. · 07.07.2006, 12:11

Спасибо за подсказку. Наконец-то я нашел, что искал.