Maximum and Minimum Height and Width in Internet Explorer
Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!
How it works in other browsers
Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit of CSS..
<div style="max-width:333px;">
[the contents of this division will be at most 333px in width on compliant browsers]
</p>Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand the max-width attribute. Fortunately, IE supports its own expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max-width and max-height. For example, to specify a width property value via the expression attribute, we could use this:
div {
width: expression(333 + "px");
}..Which is equivalent to this:
div {
width: 333px;
}The down side to using IE’s expression attribute is that it fails when JavaScript is disabled (or otherwise missing) in the user’s browser. Nonetheless, establishing max/min-widths/heights (as well as other properties) remains an important tool in the web developer’s toolbox. So, without further ado, here are a few generalized examples for slapping IE widths and heights into proper shape..
max-width in IE
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes) and include in your document via conditional comment. In this example, we are setting the max-width at 777px1 for IE and all standards-compliant browsers:
* html div#division {
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division {
max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}In this example, we are setting the max-width 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" );
}
div#division {
max-width: 33em; /* this sets the max-width value for all standards-compliant browsers */
}min-width in IE
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-width at 333px1 for IE and all standards-compliant browsers:
* html div#division {
width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* set min-width for IE */
}
div#division {
min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}max-height in IE
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px1 for IE and all standards-compliant browsers:
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division {
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}min-height in IE
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-height at 333px1 for IE and all standards-compliant browsers:
* html div#division {
height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
}
div#division {
min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}Footnotes
- 1 Why is the conditional value slightly different than the target value in the expression? Read this comment to find out.
73 responses to “Maximum and Minimum Height and Width in Internet Explorer”
Fixed the problem. Atleast it works with my code.
Although I stumbled upon the solution by mere accident. I was wondering, why is the expression code different for max-width and max-height.
And used the following code, and it worked.
width: expression(this.scrollWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */Let me know if there is any flaw in my reasoning.
Chirag,
Glad to hear you fixed the problem. As far the difference between max-width and max-height, they are targeting two different aspects of the client browser, and thus require two different JavaScript expressions to accomplish it:
document.body.clientWidth– returns the width of the broswer windowthis.scrollHeight– returns the height of the broswer windowOther than the property values, the JavaScript expressions should be the only difference between the two CSS selectors.
So, if the code you provided is correct and works as it should, everything is go! — Congrats!
About min-height for IE:
use min-height for the real browsers an
* hmtl #foo{ height:xxxpx; }for IE.
IE threads height like min-height. no need to use the expression in this case.
Ah! Very good, HDL.. I need to add this to the article.
Every opportunity to avoid unnecessary JavaScript (especially in CSS!) should definitely be taken.
— Thank you for sharing this info!
Thank you so much for publishing this information. I have been searching for half a day for a max-height work around in IE and THIS is finally something that works. You’ve saved the rest of the hair on my head!
You’re welcome! — Thanks for the positive feedback :)
document.body.clientWidth – returns the width of the broswer window, but I want to fix a max-width for one of the divs/classes that I am using.
Can anybody help me on how to do that?
I am slightly confused as to how to do this.
That is the image I am having trouble with. It resizes in Firefox to 70% of the browser just fine, but in Internet Explorer, it is way too big. I was wanting to set the maximum width at 700px. Thanks very much for the help.
Yes, I see what you mean.. way too big in IE. I see you are using table-based layouts. I have not tried this technique on tables or their various components. You might try wrapping the image in a
<div>(which would itself be placed within atdelement). Once you have that, then return to this article and apply the max-width portion of the tutorial to the div rather than to the image or a table element.Thanks so much for your help.
I have tried using the max-width for IE code, but I guess I am not putting the script in correctly.
This is the code for the picture that has the problem:
CurrentProjectsBigSurvey070904a.htmlHow would I insert the code to get it to work? Thank you so much.
Jess,
It looks like your code was gobbled up by WordPress, but I’m not entirely sure..
I will take a look at this issue as soon as possible. I downloaded an example page and will try hitting it over the head with a shovel to make it work.
Stay tuned..
Thanks very much!