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

**Agate** · 13.03.2008, 14:16

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

[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.: Именно такой порядок блоков в потоке является обязательным.

**Aykroyd** · 13.03.2008, 17:58

Полностью код в студию...

**Agate** · 13.03.2008, 21:02

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>[Только зарегистрированные пользователи могут видеть ссылки. ]</dd>
 *****<dd>[Только зарегистрированные пользователи могут видеть ссылки. ]</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="&gt;&gt;" />
 *****</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%;
}

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

**Aykroyd** · 13.03.2008, 21:11

!DOCTYPE где? Какой?

**Agate** · 13.03.2008, 21:16

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

Код:

!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 несовпадают. но я думаю это не есть проблема

**Aykroyd** · 13.03.2008, 21:34

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

Код:

<!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;...

**Agate** · 13.03.2008, 21:44

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

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

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

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

**Agate** · 13.03.2008, 22:05

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

P.S.: sidebar и его свойство дисплей, ни какого отношения к моей проблеме не имеет

**Aykroyd** · 14.03.2008, 00:17

Цитирую:

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

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

**Agate** · 14.03.2008, 00:28

Бесспоро, Гуру виднее, но мы говорим о разных вещах...
Мне странно ваше отношение, не разобравшись, говорить о шаблонах

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

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

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

**Agate** · 14.03.2008, 04:37

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

**Aykroyd** · 14.03.2008, 07:36

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

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

Опции темы

Поиск по теме

Отображение

Похожие темы

"Растяжка" абсолютно позиционированного div в ie6

Ваши права