Пропадение абсолютно позиционированного DIV в IE

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

13.03.2008, 14:16
Agate

Здравствуйте, у меня проблема определенного рода.

[attachment=7494:attachment]

Код:

#wrap { position: relative; width: 53em; } #header { position: absolute; top: 0; left: 0; height: 10em; } #sidebar, *#content { margin-top: 10em; } #sidebar { float: left; width: 16em; } #content { float: right; width: 35em; } #footer { clear: both; }

Блок header абсолютно позиционирован в рамках блока wrap, а
остальное содержимое позиционированно через float за исключением footer

Также в footer и header вложены по 2 блока. которые в свою очередь позиционированны float'ом.

Так вот, проблема состоит в том, что при такой вёрстке в IE6 блок header не видно, в других броузерах всё на месте.

Использовал и overflow: hidden; и height: 1%; не помогает, немогу даже понять причины такого поведения.

Такая же проблема была и в IE7, footer не растягивался на высоту своего содержимого, так как там присутствуют плавающие блоки, при задании overflow: hidden; или любого намёка на высоту для footer, что растягивает его на нужный размер, блок header пропадал из обозрения.

Исправил это тем, что содержимое footer обвёл ещё одним блоком
[attachment=7495:attachment]
для которого и задал overflow: hidden; и height: 1%;, но IE6 не ест это и я теперь незнаю, как и что делать.

P.S.: Именно такой порядок блоков в потоке является обязательным.
13.03.2008, 17:58
Aykroyd

Полностью код в студию...
13.03.2008, 21:02
Agate

XHTML :

Код:

<body> <div id="wrap"> ****<div id="content"> *<div id="it1" class="item"> *****<h2>....</h2> * * some content</p> * * some content</p> *</div> ****</div> ****<div id="sidebar"> *<dl id="navi"> *****<dt>...</dt> *****<dd>[Only registered and activated users can see links. Click Here To Register...]</dd> *****<dd>[Only registered and activated users can see links. Click Here To Register...]</dd> *</dl> *<div id="search">**** *****<h3>....</h3> *****<form id="s_form" method="post" action="#"> *****<input id="s_text" type="text" /> *****<input id="s_sub" type="submit" value=">>" /> *****</form> *</div> ****</div> ****<div id="header"> *<h1>....</h1> *<div id="auth"> *****<form id="l_form" method="post" action="#"> *****<label for="login">логин:</label><input id="login" type="text" /> *****<label for="pass">пароль:</label><input id="pass" type="password" /> *****<input id="l_sub" type="submit" value="Вход" /> *****</form> *</div> ****</div> ****<div id="footer"> *<div id="foo_cont"> *****<div id="contact"> * * some content</p>**** *****</div> *****<div id="sign"> * * some content</p> *****</div> *</div> ****</div> </div> </body>

CSS :

Код:

#agate { padding-bottom: 2em; } #wrap { position: relative; width: 53em; margin: 2em 4em; } #header { position: absolute; top: 0; left: 0; width: 100%; height: 10em; overflow: hidden; } #header h1 { float: left; width: 7em; padding-left: 0.5em; } #auth { float: right; } #auth form { width: 10em; height: 9em; padding: 1em 2em 0 0; overflow: hidden; } #sidebar, #content { margin-top: 10em; } #sidebar { float: left; width: 16em; margin-left: 1.5em; } #content { float: right; width: 35em; } #footer { clear: both; } #foo_cont{ height: 1%; overflow: hidden; } #contact { float: left; width: 69%; } #sign { float: right; width: 29%; }

Опустил обнуление стилей и типографику с оформлением...
Но это моя разметка и мои таблицы стилей.. суть там проглядываться должна.
13.03.2008, 21:11
Aykroyd

!DOCTYPE где? Какой?
13.03.2008, 21:16
Agate

пытался сократить пост )))

Код:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" ****"Хы ты ты пы://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="Хы ты ты пы://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" > <head> ****<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> ****<meta name="author" content="..." /> ****<meta name="keywords" content="....." /> ****<meta name="description" content="......" /> ****<meta name="robots" content="all" /> ****<title>Lorem и т.д.</title> ****<script type="text/javascript"></script> **** ****<style type="text/css" title="currentStyle" media="all"> *@import "some_style.scc"; *@import "some_style_for_print.scc" print; ****</style> </head>

Но я не думаю, что для IE6 это принципиально

P.S: ой .. EN и RU несовпадают. но я думаю это не есть проблема
13.03.2008, 21:34
Aykroyd

Вы не там сокращаете, где нужно. Собственно говоря (на будущее) от Вас требовалось следующее:

Код:

<!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #wrap {background: #FFFFCC; width: 53em; margin: 2em 4em; position: relative;} #header {background: #FFCCFF; width: 100%; height: 10em; position: absolute; top: 0px; left: 0px; overflow: hidden;} #content {background: #CCFFFF; width: 35em; margin-top: 10em; float: right;} #sidebar {background: #33CCFF; display: inline; width: 16em; margin: 10em 0 0 1.5em; float: left;} #footer {background: #CCCC99; clear: both;} </style> </head> <body> <div id="wrap"> ****<div id="content">Контент</div> ****<div id="sidebar">Сайдбар</div> ****<div id="header">Хидер</div> ****<div id="footer">Футер</div> </div> </body> </html>

Не больше и не меньше...

P.S. IE6 удваивает поля (margins) у блочных элементов с float (с той стороны, куда назначен float). Способов решения масса. В частности, можно назначить для блока #sidebar свойство display: inline;...
13.03.2008, 21:44
Agate

Я первый раз на этом форуме.
И у меня очень плохо с объяснениями.
Та конструкция, которую вы мне представили, не состовляет ничего сложного или непонятного.

Но проблема не в этом.
Проблема именно в тех блоках, кторые вложенны в хеадер и футер. Они позиционированны "плавуеще" и есть такая вещь, как "не растягивание" окаймляющего блока, что в данном случае - футер.

Если ещё более конкретизировать, то на эти блоки (вложенные) привязан фон.. и всё должно быть так как я описал.. и это у меня не выходит только в IE6

К слову... те самые пресловутые блоки о которых я столько много уже сказал, имеют достаточно свободы. чтобы не обращать внимание на удвоение полей (margins) которые у них - нулевые.
13.03.2008, 22:05
Agate

Сейчас у меня нет времени, за что извиняюсь, но завтра я попробую развёрнуто и в деталях объяснить суть..
постараюсь не писать много мусора.

P.S.: sidebar и его свойство дисплей, ни какого отношения к моей проблеме не имеет [Only registered and activated users can see links. Click Here To Register...]
14.03.2008, 00:17
Aykroyd

Цитирую:

Цитата:

Так вот, проблема состоит в том, что при такой вёрстке в IE6 блок header не видно, в других броузерах всё на месте.

Решение: при добавлении display: inline; для #sidebar в IE6 блок header видно.
Какие там еще у Вас проблемы – одному Богу известно...
14.03.2008, 00:28
Agate

Бесспоро, Гуру виднее, но мы говорим о разных вещах...
Мне странно ваше отношение, не разобравшись, говорить о шаблонах [Only registered and activated users can see links. Click Here To Register...]
Ни в коем случае не хочу Вас обидить, но то о чём Вы говорите я знаю... и о инлайне и о удвоении, былобы странно, если бы я это не попробовал. просто я не могу объяснить. [Only registered and activated users can see links. Click Here To Register...]

Хотя, естественно, есть фактор моей невежествености ))) могу ошибаться.

P.S.: при добавлении этой опасной и глупой директивы, как display: inline; ничего не изменяеться, я знаю, что дело не в этом, но ради интереса проверил ))) пути господни не исповедимы, также как и лоу броузеры без стандартов
14.03.2008, 04:37
Agate

тяжело быть мнимым идолом для такой кучи людей )))
приходиться вежлево хамить и отпираться, когда не понимаеш )))
14.03.2008, 07:36
Aykroyd

Словесный понос? :read: