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

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 ba开发者_开发问答sis 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?

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.

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

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]-->