Min & Max Height & Width in IE6 Tutorial
IE6 does not understand min/max of both height or width. So, if you need any of these four css properties to work in IE6, then you'll need to feed IE6 an IE expression. Basically, they're little snippits of javascript tailored for IE.
IE expressions don't validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the <head>, or feed them to IE6 with the * html hack - whatever floats your boat. Here are all three methods to feed specific rules to IE6.
min-width in IE6
div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth<501?"500px":"auto");
}
max-width in IE6
div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth>499?"500px":"auto");
}
min-height in IE6
div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight<501?"500px":"auto");
}
max-height in IE6
div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight>499?"500px":"auto");
}
Note: In the examples above, you can safely remove the first width value of 500px, or you can change it to any value to suit your needs. In other words, it does not have to be the same value as the expression directly below it - it's just an added feature. For instance, let's say you were doing a min/max width on your #wrapper, with the values of {min-width: 600px; and max-width: 1024px;}. Well then, I might make my fall-back width value {width: 960px;} for example. This way, if JS if turned off and someone is viewing on IE6 and on a 2000px wide screen, my layout (and text) does not stretch the full length of the screen. That’s only one example, I'm sure there are many other situations where the fall-back value would fit as well.
...and min-width in IE6 on the body
body {
width:expression(d=document.compatMode=="CSS1Compat"?documentElement:document)&&(d.clientWidth<501?"500px":"auto");
}
