While re coding my site I have come across many IE bugs that I been forced to learn about. The max and min bug is just another example of IE6 not playing well with others. Fortunately they fixed this in 7 and should only affect 6 and below. The min and max height (and width for that matter) allow you to set minimum and maximums for an element. I actually use this for my code view. In BlogCFC everything you put in between code tags gets parsed out in a .code block. When you have very little code there is no problem but what happens if you have 300 lines of code in your example? You don't want it taking up your whole page do you? The answer is no, so you can set a max-height property for the code div. This is the css code for my code block.
1.code {
2 font-family:courier new;
3 font-size:12px;
4 color: black;
5 border: solid thin #bc5e1f;
6 background-color: #f3f3f3;
7 overflow: auto;
8 max-height: 200px;
9 padding: 4px;
10 line-height: 15px;
11 margin:5px 0;
12}
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.
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.
2 font-family:courier new;
3 font-size:12px;
4 color: black;
5 border: solid thin #bc5e1f;
6 background-color: #f3f3f3;
7 overflow: auto;
8 max-height: 200px;
9 padding: 4px;
10 line-height: 15px;
11 margin:5px 0;
12}
#1 by dave on 1/1/08 - 11:13 PM
/*hack it for microsofts poor excuse of a browser*/
/*\*/
* html #contentwrap {
height: 200px;
}
or this (but this wont validate)
_height: 200px;
#2 by Richard Davies on 1/4/08 - 6:41 PM
This post describes a way to simulate the "max-height" CSS property. Your IE hack would work if the goal was to simulate min-height, but in this particular case we're concerned with max-height.
#3 by jennifer on 1/25/09 - 7:51 PM
#4 by satya on 9/18/09 - 9:49 AM
I've not tried on IE-6.
Works fine IE>=7 and FF(as usual).
Thanks, again !