We often find some of the handy CSS properties are not supported by IE6. It is not good idea to ignore IE6, as a web developer we need to maximize the reach of our website. For that we need to support a wide range of browsers.
Coming back to the main aim of the post, min-width, min-height, max-width, max-height are some of the properties with IE6 doesn’t support. So how we do with that? Here is how, we have to use IE’s expression in CSS to make it work for us.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
</script>
<style>
.pagewidth {
margin: 0 auto;
background-color: #CDCDCD;
height:20px;
min-width: 500px;
}
∗ html div.pagewidth {
width: expression( document.body.clientWidth < 501 ? "500px" : "auto" );
}
</style>
</head>
<body>
<div class="pagewidth">
</div>
</body>
</html>
By using * html div#pagewidth we are targeting IE specifically, then we are telling the browser to execute an expression to find a with for that particular element. document.body.clientWidth < 501 ? "500px" : "auto" is conditional statement, which test clientWidth and choose the value for width.
For min-height and max-height, you have to test with document.body.scrollHeight.
You can read more about this here.
