Ladies and gentlemen… presenting the 8th Wonder of the Virtual World—the max/min-height and max/min-width properties—making possible the manipulation of IE widths and heights into desirable proportions. The CSS expression attribute allows the execution of Javascript commands within the Internet Explorer.
This one is hot stuff simply because standards-based browsers, max/min-height and max/min-width properties are easy to do with the application of Cascading Style Sheets.

<div style=”max-width: 333px;”>
[the contents of this division will be at most 333px in width on compliant browsers]
</p>

Definitely, this thing is no big job for Internet Explorer because IE supports its very own expression attribute. This enables you to use Javascript expressions to modify XHTML file properties like max-width and max-height. This may appear similar to this:

div {
width: expression(333 + “px”);
}
..Which is equivalent to this:
div {
width: 333px;
}

Take note however that IE’s expression may fail when Javascript is not activated in the user’s browser. Below are some of the cool examples of manipulating widths and heights in order.

max-width in Internet Explorer.

This is confirmed to work in IE6 and must therefore work in IE5. Just change the values based on your preference and input these into your document. To set max-width to 777px 1 you can do it this way:

* html div#division {
width: expression( document.body.clientWidth > 776 ? “777px” : “auto” ); /* sets max-width for IE */
max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

In this example, the max-width is set at 33em for IE and all standards-compliant browsers:

* html div#division {
width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? “33em” : “auto” );
max-width: 33em; /* this sets the max-width value for all standards-compliant browsers */
}

min-width in IE

In this example, the objective is to set the min-width at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
width: expression( document.body.clientWidth < 334 ? “333px” : “auto” ); /* set min-width for IE */
min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}

max-height in IE

In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
height: expression( this.scrollHeight > 332 ? “333px” : “auto” ); /* sets max-height for IE */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

min-height in IE

In this example, we are setting the min-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
height: expression( this.scrollHeight < 334 ? “333px” : “auto” ); /* sets min-height for IE */
min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}

These methods have been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). To see actual presentation, please go to http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/.

Tags: Give It Up for the 8th Wonder of the Virtual World