Maximum and Minumum Height in IE
Tuesday January 1, 2008 8:56 PM
Word Count: 457
.code {
font-family:courier new;
font-size:12px;
color: black;
border: solid thin #bc5e1f;
background-color: #f3f3f3;
overflow: auto;
max-height: 200px;
padding: 4px;
line-height: 15px;
margin:5px 0;
}
This works great in Firefox and IE 7 but IE6 does not recognize min and max height values so it shows all of the code. This is where expressions come into play.CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. This is a great way to correct this problem because no other browser will see our expression. We still can not use a max-height property but we can set the height of this div. All this expression does is evaluate the height of the element, if it is greater than 200 pixels it sets the height to 200.
font-family:courier new;
font-size:12px;
color: black;
border: solid thin #bc5e1f;
background-color: #f3f3f3;
overflow: auto;
max-height: 200px;
padding: 4px;
line-height: 15px;
margin:5px 0;
}
height: expression(this.scrollHeight > 200 ? "200px" : "auto"); /* IE */
Firefox and IE7 will rely on the max height while IE6 will see height property. The only downfall to expressions is that they will fail if JavaScript is turned off. All in all I think it is an easy fix for our problem.
