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

Вид для печати

30.06.2006, 19:58
Konstantin S.

Добрый день.

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

В браузере видим такую картинку:
[Only registered and activated users can see links. Click Here To Register...]

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

Код:

html {margin-top: 100px;}

FireFox показывает вот так:
[Only registered and activated users can see links. Click Here To Register...]
(то есть, он весь контент сместил вниз).

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

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

Заранее спасибо.
01.07.2006, 02:34
Live

а разве можно "двигать" html? я бы для body сделал padding-top
01.07.2006, 12:25
Konstantin S.

Цитата:

Originally posted by Live@Jul 1 2006, 00:34
а разве можно "двигать" html? я бы для body сделал padding-top
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/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">

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

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

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

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

Да мне не для веб-дизайна. Я пишу одну прогу в которую будут загружаться HTML страницы и нужно просто сдвинуть контент этих страниц вниз. В качестве движка для показа хочется использовать IE, потому что он у всех стоит, да и под него проще программировать. Хотя, если не получится, то придется юзать FireFox... [Only registered and activated users can see links. Click Here To Register...]
01.07.2006, 17:53
Konstantin S.

Цитата:

Originally posted by Live@Jul 1 2006, 14:24
я тебе уже сказал - задай padding-top для body* и оставь html* в покое.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/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>

Так это ни в одном браузере не работает...
01.07.2006, 18:02
Severe

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

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

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

Цитата:

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

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

Или же через "position:relative;", если вам это подойдёт.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

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

Код:

<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 пикселей от верхней границы
01.07.2006, 23:56
Live

а в вашем примере абсолютный див нужно позиционировать с учетом тех самых 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>
02.07.2006, 01:22
Konstantin S.

Цитата:

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

Код:

...

<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

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

Цитата:

Originally posted by Konstantin S.@Jul 1 2006, 23:22
А если doctype нету, то и CSS не сработает.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Почему?
02.07.2006, 12:47
Konstantin S.

Цитата:

Originally posted by Pupil@Jul 2 2006, 10:34
Почему?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/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. А потом удалите первые две строки и посмотрите на результат.
02.07.2006, 14:14
Pupil

Цитата:

Originally posted by Konstantin S.@Jul 2 2006, 10:47
И посмотрите, что покажет IE. А потом удалите первые две строки и посмотрите на результат.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

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

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

почему тогда в этом примере все нрмально работает без объявления 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>

проверял в ИЕ, Опере и ФФ
02.07.2006, 21:59
Konstantin S.

Цитата:

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'>[Only registered and activated users can see links. Click Here To Register...]</div>

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

Код:

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

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

Я так и не понял почему [Only registered and activated users can see links. Click Here To Register...] не устроил. Работает с типом и без него.
Или воспользуйся фреймами.
03.07.2006, 02:54
Live

Цитата:

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'>[Only registered and activated users can see links. Click Here To Register...]</div>

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

Цитата:

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

[/quote]

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

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

Цитата:

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

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

Ты уже выяснил поведение IE. Влюбом случае тебе нужно вносить изменения в HTML код страницы. Чтоб сделать такой отступ, тебе придется поместить выводимую страницу в контейнер и, этот контейнер отбить на нужную величину. Предложенный вариант больше всего подходит.