CODEWITHSUNDEEP
cssinternet-explorer
Victor
Victor

Reputation: 99

100% width div doesn't display correctly in IE

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 alt text http://www.pechat.mdkbg.com/problem.jpg

What is the problem?

Upvotes: 2

Views: 14866

Answers (4)

derekerdmann
derekerdmann

Reputation: 18262

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

top: 0;
left: 0;

Upvotes: 3

MrWhite
MrWhite

Reputation: 46002

@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;?

Upvotes: 4

Yisroel
Yisroel

Reputation: 8174

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?

Upvotes: 2

Puaka
Puaka

Reputation: 1751

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

Upvotes: 2

Related Questions