Div ширины 100% не отображается правильно в IE

Question

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

.head_warp
{
 width:100%;
 display:block;
 height:238px;
 margin:0 auto;
 padding:0;
 position:absolute;
 text-align:center;
 background-image:url(images/demo6_fon.png);
 background-position:center;
 background-position:top;
 background-repeat:repeat-x;
 z-index:-9999;
}

и после этого у меня есть контейнер

#container_out
{
 width:1024px;
 margin:0 auto;
}

HTML-код таков:

<div class="head_warp"></div>
<div id="container_out"></div>

Идея состоит в том, чтобы содержимое в «контейнере» отображалось поверх «head_warp», и это нормально в любом браузере, с которым я тестировал. Chrome, FF, Safari даже с IE8 и IE7. Но мой коллега работает с IE8 с Windows VISTA и посмотрите, каков результат альтернативный текст http://www.pechat.mdkbg.com/problem.jpg

В чем проблема?

Answer 1

@ Puaka Я думаю, что все браузеры относятся к родительскому контейнеру при указании ширины в процентах. В этом случае оно должно быть относительно тела.

Правильно ли указан ваш DOCTYPE?

Если вы абсолютно позиционируете элемент, вы должны указать верхнюю / левую позицию, которую вы не делаете. Кроме того, вы указываете margin:0 auto;, подразумевая, что может быть левое / правое поле. Я бы подумал, что это должно быть просто margin:0;?

Answer 2

Похоже, вам не хватает информации для вашего абсолютно позиционированного div:

top: 0;
left: 0;

Answer 3

Я только что проверил его в IE8 на Vista, и он выглядел нормально.

Похоже, что все, что делает div - это отображение фонового изображения для страницы. Почему бы просто не добавить фоновое изображение к body и избавиться от этого div?

Answer 4

в IE, ширина 100% будет использовать ширину родительского элемента, поэтому вам нужно поместить ее в container_out, изменить css container_out, возможно, добавив padding-top / margin-top = header_warp height