Setting html, body width in IE

HTML & CSS
1

Hi

I have used position:absolute on a page to align an element, I have used a fixed width of 800px and centered the page via auto margins. The position is correct on firefox but in IE the element is still being positioned from the edge of the screeen rather than the new width of my html declaration, how can I force IE to play ???

Thx in advance…

2

Hey pxs,

Firstly be carefull when using absolute positioning, it can hamper the flow of future additions to your website design.

As for your problem, could you post some of your code so i can see where you’ve gone wrong?

3

Hi,

new width of my html declaration

You will need to set the width on the body instead and then apply position:relative to it.

e.g.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{width:800px;margin:auto;position:relative;}
#test{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
    left:25px;
    top:25px;
}


</style>
</head>
<body>
<div id="test">Test</div>
</body>
</html>

Don’t set position:relative on the html element because safari will hide all other elements in the page that have position:relative defined (nasty bug).

Also note that IE6/7 in quirks mode and ie5 and 5.5 will not center the page using his method because they don’t understand auto margins. They also assume body is the root and therefore you cannot use text-align:center on html to force the centring as you usually would.

In my opinion there are just too many bugs when using a width on the body or html and I much prefer to use a page container instead and centre that and avoid all the bugs and little issues.

4

OK, looks like setting the html, body tag is out, ill try something else, thanks anyway.

5

That’s the challange of it. :wink:

No but styling <body> is usually fine AFAICT except in IE5 which I don’t care about. Applying backgrounds etc. on the root element (avoiding position:relative) also works fine. No? :slight_smile:

6

Well I suppose you are right if you take ie5 and 5.5. (and ie6 and ie7 in quirks mode) out of the equation then most of the problems I mention aren’t applicable :).

There are still some issue with background images sliding off the screen but most of these can be fixed with position relative on the body as mentioned above. There was another bug I found but I can’t remember what it was so it can’t be that important.

I do still support ie5.5 which is why I avoid using the width on the body but as you say in modern browsers most of the bugs aren’t applicable :slight_smile:

7

Another reason to avoid using a width on the body :slight_smile: