100% width div doesn't display correctly in IE

Question

Well I have, I think, kind of unusual question. Well I have a web page with starting div with absolute position.

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

and after that I have a container

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

The HTML is that way:

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

The idea is the content in the "container" to be shown over the "head_warp" and it's ok in any browser I tested with. Chrome, FF, Safari even with IE8 and IE7. But my co worker is with IE8 with windows VISTA and look what is the result

What is the problem?

Answer 1

in IE, 100% width will use its parent width, so you need to put it inside container_out, change your container_out css, maybe add padding-top/margin-top = header_warp height

Answer 2

I just tested it in IE8 on Vista and it displayed fine.

It looks like all that div is doing is displaying a background image for the page. Why not just add the background image to body and get rid of that div?

Answer 3

@Puaka I think all browsers are relative to the parent container when specifying a percentage width. In this case it should be relative to the body.

Is your DOCTYPE correct?

If you are absolutely positioning an element, you should be specifying the top/left position which you don't appear to be doing. Also, you specify margin:0 auto; implying there could be a left/right margin. I would have thought this should be simply margin:0;?

Answer 4

Looks like you're missing some information for your absolutely-positioned div:

top: 0;
left: 0;

Answer 5

derekerdmann your solution is the wright one. I forgot for these lines :). Thank you all.