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”
Thanks very much… I had given up and gone to a fixed-height container (very ugly) so I’m very glad to finally “get it right”. Worked perfectly in IE6 & IE7
What does the “* html” mean in the code?
Thanks,
Dumbboy
The "
* html" targets the IE browsers for which this particular method is designed..No good in IE6 – caused browser to stop responding.
Yeah, sorry about that — I need to update this post to reflect the following information:
Expressions with equal “conditional” and “target” values may cause IE6 to chase after itself and freeze up:
width: expression( document.body.clientWidth > 777 ? "777px"Notice the matching
777values? That is the cause of the error. Solving this issue involves simply changing one of the numbers to a slightly different value. For example, this code will produce the desired effect (without crashing) in IE6:width: expression( document.body.clientWidth > 776 ? "777px"Thanks for the comment — now I need to edit the article!
I am using max-height and max-width for images in my site. Max height works perfectly fine. Max width also works, but it stretches the smaller images to the specified max-width and thereby warping the image.
How do I fix that?
Good question, Chirag, although I am not entirely certain I understand you correctly. If I’m not mistaken, max-width will enable an image to increase in width until the specified maximum value is achieved. Thus, it would seem that if you specify a max-width value that exceeds that of the image itself, the image will indeed “stretch” and become distorted..
If I have totally misunderstood your question, perhaps you could point me to an example page demonstrating the issue. I would be more than happy to help in a more specific manner, provided I have something concrete with which to work.
The site which I am working on is still in development phase. So, don’t have a place to point to.
U have almost got the problem.
It is like this,
When image width is larger than the specified max-width, then the image scales down(maintaining the aspect ratio) to max-width.
But when image width is smaller than specified max-width, then the image gets stretched to max-width and therefore looks ugly.
I think I got the problem. I have a list of pictures on my page with class = “pictures”. So, even if one of those images is larger than the max-width, then the expression returns max-width thereby stretching the smaller images as well.
Am I making any sense, or is it still too vague.
How do i fix this problem now?
I think I was wrong. I tried it with all the images smaller than max-width. But still it is stretching them all to max-width.
Hmmm yes, I see.. however without a specific case, I may only generalize possible solutions and provide a few clues for your further experimentation. Having said that, you may want to try specifying an explicit
widthalong with themax-width. If the width is specified via dynamic units (e.g., ems, %), the images will remain resizable, and you may obtain more control over stretching/sizing issues for all values less than that of the specified max-width. Also, I assume you are experiencing the problem in IE only, as most other modern browsers seem to correctly interpret the infamousmax-widthproperty. Although there is generally a CSS-based solution to issues such as this, it is sometimes necessary to resort to manipulating the DOM directly via JavaScript. I hope this helps..Yeah, max-width works perfectly fine with other browsers and I do so much hate IE. But then most of the users or so to say ignorant internet users, use that pathetic browser.
I will let you know when my site goes on production and probably then you can suggest some changes.
Thanks for all the help.
WOW!!!
It works amazingly!
since I’m so often using pre on my post (because it’s a tutorial about hacking the blogger) so it’s really helpful.
THANK YOU!!