Absolute positioning in IE6, using left: 0; and right: 0; simultaneously

Question

Here is my website: http://dagwaging.110mb.com/ View it in any good browser, then in IE6. It dies in IE6. It seems that in IE6, one can't do this:

div {
position: absolute;
left: 0px;
right: 0px;
}

or this:

div {
position: absolute;
top: 0px;
bottom: 0px;
}

Absolute positions cannot be set for left and right or top and bottom at the same time. This is terrible, because that is pretty much the basis of my site design. The HTML can be viewed on the site, and the CSS is in /style.css. I'd like to fix this without invalidating my CSS or HTML. Can this be done?

Another problem is that my content uses min-width and max-width to avoid over-stretching or compressing the content within. IE6 can't do min-width, so how can I replicate this behavior?

Answer 1

Well, if you want to fix it, take a look at this article on A List Apart, it deals with this exact subject (and explains how to work around it): Conflicting Absolute Positions

But personally, I'd just ignore IE6.

Answer 2

one way to get rid of problems on IE6 is USING the imperfections of IE6, you know that width=100% in IE6 contains the padding and margin too, so u shoulding worry, but i do agree with above answer, new browsers dont see both, so you should consider dropping one of them

as for min- and max- the only way i was able to do that is with jquery, u can always use the getBoundingClientRect (DOM javascript) that works only on IE to determine the height and width, if u dont want to use jquery

Answer 3

To implement width at 100% in IE6, add this to your code:

<!--[if lt IE 7]>
<style type="text/css">
div {
  width:expression(document.body.clientWidth);
}
</style>
<![endif]-->

To implement height at 100% in IE6, add this to your code:

<!--[if lt IE 7]>
<style type="text/css">
div {
  height:expression(document.body.clientHeight);
}
</style>
<![endif]-->

If you need a div around the entire page (both width and height at 100%), simply join these two attributes like this:

<!--[if lt IE 7]>
<style type="text/css">
div {
  height:expression(document.body.clientHeight);
  width:expression(document.body.clientWidth);
}
</style>
<![endif]-->