Простейший пример с 2мя div'ами, не могу понять в чем дело.

swordsman79 · 23.05.2006, 14:32

Почему настолько по-разному отображается страничка в Эксплорере и Файерфоксе?
И даже близко нет к тому, что хотелось бы видеть:
В центре - меню высотой 250px
Под ним же - контент.

undeddy · 23.05.2006, 20:30

Ответ: разные броузеры, разные объектные модели броузеров и их реализации, разные фирмы.

swordsman79 · 24.05.2006, 11:26

Слишком расплывчато. Это я и так знаю, что разные браузеры-разные фирмы. Вопрос почему слой в нормальном потоке вообще может как-то влиять на слой с позиционированием absolute?

Вот в данном примере (я его еще более упростил), для слоя menu - смещения по вертикали не задано, а он все равно "прилипает" к слою content и спускается вниз на 30px. (и это для ФайерФокса!)
Замечено если поменять в теле страницы дивы местами - все вроде ОК. Но тут уже дело принципа.
Замечено также, что если смещать вниз не слой content, а сделать дочерний слой и сместить его - все опять же ОК.
Что-то с реализацией margin-left:auto, margin-right:auto ? По ходу они как-то влият на margin по вертикали.

baron27 · 24.05.2006, 13:28

не понял, что ты хочешь увидеть, но вот так можно добиться одинакового отображения.

Код:

#menu {
	top:0;
	position:absolute;
	left:50%;
	width:760px;
	margin-left: -380px;
	z-index:99;
	border:1px solid #000;
}
#content {
	width: 300px;
	position:relative;
	top:100px;
	/*margin-top: 100px;*/
	margin-right: auto;
	margin-left: auto;
	border:1px dotted #000;
	background-color:#FFFFCC;
}

swordsman79 · 24.05.2006, 14:57

Огромное спасибо! Я узнал для себя следующее:
По умолчанию у position стоит static, хотя я считал, что должно быть relative. Почему на static не влияет margin-top, а влияет только top - непонятно все равно. Нелогично как-то.
Но самая главная загадка: почему в ФайерФоксе (повторяю для товарища etc в ФайерФоксе, да собственно и в Опере, я просто не стал писать про все браузеры в мире) абсолютно позиционированый слой имеет наглость смещаться вниз?

С чего все началось?
Нужно-то всего два слоя - оба позиционированы в центре страницы, menu - в самом верху, пошире; content - колонкой поуже смещен вниз.
В самом начале сделал два абсолютно позиционированных слоя с отрицательными margin-left. Но в IE6 проявился неожиданный эффект: когда пользователь пытался выделить текст на контенте, выделялось сразу все, включая содержимое слоя menu, выделить допустим два слова - было невозможно. Поэтому я решил menu позиционировать абсолютно через отрицательное смещение, а content - выровнять с помощью left:auto; right:auto.

etc · 24.05.2006, 13:30

Учить мат. часть. При разработке надо смотреть не только на IE, но и остальные браузеры.

baron27 · 24.05.2006, 15:42

>>пытался выделить текст на контенте, выделялось сразу все, включая содержимое слоя menu

мне кажется это просто глюк ие...

swordsman79 · 24.05.2006, 15:45

В этом-то и дело. В Опере и Лисе все работало как надо. Но нельзя же просто забить на юзеров с ИЕ. :-)
Рановато пока.

billyboom · 24.05.2006, 20:07

ИМХО просто надо было использовать другую конструкцию css

Код:

<style type="text/css">
<!--
.menu {
top: 10px;	
position:absolute;
	left:50%;
	width:810px;
	height:250px;
	margin-top:0;
	margin-left: -405px;
	padding-left: 50px;
	z-index:99;
	background-color: #003366;
}
.content {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCCC00;
	margin-top: 250px;
	padding-top: 120px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 30px;
}
-->
</style>
</head>

<body>
<div class="menu">

опять таки ИМХО атриут id корректнее работает под ИЕ

swordsman79 · 25.05.2006, 11:15

Причем здесь вообще классы? Я не собираюсь иметь на странице 10 div'ов класса content и столько же menu!

И как понять последнюю фразу? "Корректнее" в сравнении с чем?