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

**Konstantin S.** · 30.06.2006, 19:58

Добрый день.

Вот такой вот вопросик есть к участникам форума...
Имеем вот такой 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 вниз сместилось все ?

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

**Live** · 01.07.2006, 02:34

а разве можно "двигать" html? я бы для body сделал padding-top

**Konstantin S.** · 01.07.2006, 12:25

Originally posted by Live@Jul 1 2006, 00:34
а разве можно "двигать" html? я бы для body сделал padding-top
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

"Двигать" можно. Вот пример:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
****"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { position: relative; padding: 10px; margin-top: 100px; background-color: #BFB; }
</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>
<div>TEST TEST TEST</div>
</body>
</html>

Однако, если в заголовке не указано

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
****"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

То и не работает ничего. То есть, как в режиме совместимости подвинуть ?

**Live** · 01.07.2006, 16:24

я тебе уже сказал - задай padding-top для body и оставь html в покое.

**Severe** · 01.07.2006, 16:49

Konstantin S., в Опере не проверяли?

Тем не менее, я бы вам советовал подстраиваться под особенности IE, как наиболее используемого браузера (хотя сам пользуюсь Mozilla Firefox и от отображения сайтов не в восторге), ищите обходные пути для достижения поставленной цели.

**Konstantin S.** · 01.07.2006, 17:50

Да мне не для веб-дизайна. Я пишу одну прогу в которую будут загружаться HTML страницы и нужно просто сдвинуть контент этих страниц вниз. В качестве движка для показа хочется использовать IE, потому что он у всех стоит, да и под него проще программировать. Хотя, если не получится, то придется юзать FireFox...

**Konstantin S.** · 01.07.2006, 17:53

Originally posted by Live@Jul 1 2006, 14:24
я тебе уже сказал - задай padding-top для body* и оставь html* в покое.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Вот так ?

Код:

<html>
<head>
<style type="text/css">
body { padding-top: 100px; background-color: #CFC; }
</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>
<div>TEST TEST TEST</div>
</body>
</html>

Так это ни в одном браузере не работает...

**Severe** · 01.07.2006, 18:02

По идее на абсолютную позицию не должны действовать ни маргины, ни паддинги...

Попробуйте тогда как советовал Live, только укажите:
position:absolute;left:0px;top:100px;

Или же через "position:relative;", если вам это подойдёт.

**Konstantin S.** · 01.07.2006, 20:15

Originally posted by Severe@Jul 1 2006, 16:02
По идее на абсолютную позицию не должны действовать ни маргины, ни паддинги...

Попробуйте тогда как советовал Live, только укажите:
position:absolute;left:0px;top:100px;

Или же через "position:relative;", если вам это подойдёт.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Попробовал. К сожалению эффекта никакого.
Как мне кажется, IE не в режиме соблюдения стандартов вообще подвинуть контент вниз не может. Так как считает body всем пространством для рисования. В режиме соблюдения стандартов, body является дочерним элементом html'a и его можно двигать. Я думаю, что тут неплохо ба подошел какой-нибудь хак или что-то вроде того. Можно даже программный хак...
Вопрос только в том, что именно надо сделать. Единственное, что пока приходит в голову, это после загрузки страницы тупо сдвигать вниз все слои, у которых position:absolute, хотя это не есть хорошо. Хотелось бы что-то попроще.

**Live** · 01.07.2006, 23:52

не знаю, что там у вас не рабтает... и зачем вы там для боди рамки задаете. вот сделал полный примитив - минимальная хтмл конструкция, без доктайпа и т.п. работает во всех браузерах:

Код:

<html>
<head></head>
<body style="padding-top:100px; *margin:0px;">
<div style="height:30px; width:300px; background-color:black; color:white;">zzz</div>
</body>
</html>

появляется отличный отступ в 100 пикселей от верхней границы

**Live** · 01.07.2006, 23:56

а в вашем примере абсолютный див нужно позиционировать с учетом тех самых 100 пикселей сверху:

Код:

<html>
<head>
<style type="text/css">
body { padding-top: 100px; background-color: #CFC; }
</style>
</head>
<body style="border: 1px dashed #999;">
<div style="background-color: #9F9; position:absolute; left: 15px; top: 110px;">ABSOLUTE DIV</div>
<div style="background-color: #99F;">NORMAL DIV</div>
<div>TEST TEST TEST</div>
</body>
</html>

**Konstantin S.** · 02.07.2006, 01:22

Originally posted by Live@Jul 1 2006, 21:56
а в вашем примере абсолютный див нужно позиционировать с учетом тех самых 100 пикселей сверху:

Код:

...

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Я прекрасно понимаю, что я сам могу сверстать пагу, как мне нужно. Вопрос стоит в модификации уже существующей страницы. Ну вот хочу я загрузить например yandex.ru и чтобы страница эта у меня отображалась с отступом в 100 пикселей сверху. Если в документе есть doctype, то я тогда просто подгружу в браузер свой CSS, который и сдвинет контент. А если doctype нету, то и CSS не сработает. Вот я и ищу способ, который бы позволил с малыми модификациями существующей страницы провернуть такой трюк.

**Pupil** · 02.07.2006, 12:34

Originally posted by Konstantin S.@Jul 1 2006, 23:22
А если doctype нету, то и CSS не сработает.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Почему?

**Konstantin S.** · 02.07.2006, 12:47

Originally posted by Pupil@Jul 2 2006, 10:34
Почему?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Потому что браузер работает в так называемом Quirk режиме. То есть, в режиме совместимости body является главной канвой для рисования. А вот в режиме соблюдения стандартов он является дочерним элементом html, поэтому его можно сместить вниз. Возьмите этот код:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { position: relative; padding: 10px; margin-top: 100px; background-color: #BFB; }
</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>
<div>TEST TEST TEST</div>
</body>
</html>

И посмотрите, что покажет IE. А потом удалите первые две строки и посмотрите на результат.

**Pupil** · 02.07.2006, 14:14

Originally posted by Konstantin S.@Jul 2 2006, 10:47
И посмотрите, что покажет IE. А потом удалите первые две строки и посмотрите на результат.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Можно не удалять эти строки, а написать перед ними что угодно, результат будет одинаковый. Но это не значит, что CSS не сработает. А означает, что переходит в режим совместимости, а в этом режиме работает не так.
Самый распространенный обозреватель очень сильно отстает от жизни.

В чем состоит задача? Заранее не известно, есть объявление типа или нет, отступ должен быть. Так?

**Live** · 02.07.2006, 17:13

почему тогда в этом примере все нрмально работает без объявления DT?

Код:

<html>
<head></head>
<body style="padding-top:100px; *margin:0px;">
<div style="height:30px; width:300px; background-color:black; color:white;">zzz</div>
</body>
</html>

проверял в ИЕ, Опере и ФФ

**Konstantin S.** · 02.07.2006, 21:59

Originally posted by Live@Jul 2 2006, 15:13
почему тогда в этом примере все нрмально работает без объявления DT?

Код:

<html> <head></head> <body style="padding-top:100px; *margin:0px;"> <div style="height:30px; width:300px; background-color:black; color:white;">zzz</div> </body> </html>

проверял в ИЕ, Опере и ФФ
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

А теперь добавьте сюда

Код:

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

И Вы увидите, что абсолютно позиционированный слой никуда не сдвинулся.

**Pupil** · 02.07.2006, 23:23

Я так и не понял почему [Только зарегистрированные пользователи могут видеть ссылки. ] не устроил. Работает с типом и без него.
Или воспользуйся фреймами.

**Live** · 03.07.2006, 02:54

Originally posted by Konstantin S.@Jul 2 2006, 21:59
А теперь добавьте сюда

Код:

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

И Вы увидите, что абсолютно позиционированный слой никуда не сдвинулся.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

ну правильно, вы же его позиционировали АБСОЛЮТНО и задали координаты left: 0px; top: 0px! вот он и находися именно там, где и должен быть...
rtfm

**Konstantin S.** · 03.07.2006, 09:28

Originally posted by Live@Jul 3 2006, 00:54
ну правильно, вы же его позиционировали АБСОЛЮТНО и задали координаты left: 0px; top: 0px!* вот он и находися именно там, где и должен быть...
rtfm
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Прочитайте внимательно то, о чем я писал до этого.

<div class='quotetop'>Цитата</div>

Я прекрасно понимаю, что я сам могу сверстать пагу, как мне нужно. Вопрос стоит в модификации уже существующей страницы. Ну вот хочу я загрузить например yandex.ru и чтобы страница эта у меня отображалась с отступом в 100 пикселей сверху. Если в документе есть doctype, то я тогда просто подгружу в браузер свой CSS, который и сдвинет контент. А если doctype нету, то и CSS не сработает. Вот я и ищу способ, который бы позволил с малыми модификациями существующей страницы провернуть такой трюк.[/b]

НЕ Я СОЗДАЮ СТРАНИЦУ ! Я ЕЕ ТОЛЬКО ЗАГРУЖАЮ В БРАУЗЕР И ХОЧУ МОДИФИЦИРОВАТЬ ТО, ЧТО УЖЕ БЫЛО НАПИСАНО ДРУГИМИ ! ПРИЧЕМ, С МЕНЬШИМ ГЕМОРОМ !

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

Опции темы

Поиск по теме

Отображение

Похожие темы

как такое сделать на div?

Можно ли сделать такое?

Как сделать такое подчёркивание ссылки

Как бы такое сделать?

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

Ваши права