How to implement cross-browser min-height and max-height at the same time?
If you want to go for pure CSS I would post a conditional stylesheet route.
However, my preferred solution is just jQuery:
$(document).ready() (function() {
if ($("#division").height() > 200) {
$("#division").height('200px');
}
if ($("#division").height() < 40) {
$("#division").height('40px');
}
}
source to share
I am assuming that you are writing your CSS this way because you want to support Internet Explorer which does not recognize the maximum min-height.
I suggest you move everything into a conditional stylesheet that only IE will use:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
Read this one for more information on this technique. This is the only correct way to deal with Explorer problems.
source to share
Here's a method derived from the article on minimum height and maximum height in IE :
* html div#division {
height: expression(this.scrollHeight >= 200 ? "200px" : this.scrollHeight <= 40 ? "40px" : "auto");
}
div#division {
min-height: 40px;
max-height: 200px;
overflow: hidden;
}
The value expression
only works in IE, but works up to IE 5. Here it keeps the property height
within the required range. Compliant browsers will ignore this declaration and use the min-height
and rules instead max-height
.
Caveat: JavaScript must be enabled in IE for it expression
to work.
The technique you are currently using may be preferable to the crowd of "use pure CSS only", but IMHO it is obscure and fragile. Using an IE-specific non-standard value indicates that the code is written specifically to support IE. This is not only self-documenting, but also makes it easier to port IE-specific code into separate CSS files.
source to share