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”
Jess,
I think I got it..
Try adding this to the
<head>of the document:<style type="text/css">* html td#gallery img {width: expression( document.body.clientWidth > 699 ? "700px" : "auto" ); /* sets max-width for IE */}td#gallery img {max-width: 700px; /* this sets the max-width value for all standards-compliant browsers */}</style>..and then tag your image container (table cell) with an
id="gallery"attribute, for example:<td id="gallery">Given the table-based design with which you are working, this approach should do the job: images will be displayed with a max-width of 700px. The trick was to apply the CSS expression to the image itself, rather than to its container. Keep in mind, however, that this method employs a CSS hack (
* html), which you may want to include via a conditional comment.Thank you very much for the time and effort you put into this! I really, really appreciate it! I can’t wait to try it! -Jessy
My pleasure! Let me know how it goes ;)
So after working on this site for a while I opened it for the first time in Internet Explorer 6 and lo and behold it looks like garbage.
Basically, users can upload pics to the site and I display them in different sizes using the max-height and max-width tags. IE 6 does not recognize these tags.
Aside from the fact that I am now strongly cursing Microsoft under my breath for having a browser that most people use which doesn’t support these tags, I have no choice but to get around it.
I found the following code that works in a stylesheet:
.index_image:
{
height: expression(this.height > 150 ? 150: true);
width: expression(this.width > 150 ? 150: true);
}
This works as written but unfortunately does not retain the image’s aspect ratio. In other words, there is an image that is 371×640 and is correctly displayed in Firefox/Opera/Safari/etc using max-width and max height as 86×150.
Using this IE hack however, since both dimensions are greater than 150, it stretches the aspect ratio to 150×150.
Is there anyway to get around this through a CSS expression?
Ugh, darn you IE.
I am facing same problem mentioned above,
can i maintain aspect ration on both conditions in IE?
max-width : 120px;
max-height: 160px;
Solution,
for 120×160 aspect ratio.
.index_image{
height:expression(this.height>this.width+40 && this.height>160?160:true);
width:expression(this.width+40>this.height && this.width>120?120:true);
max-width : 120px;
max-height: 160px;
}
for u Tom,
150×150 aspect ratio
.max{
height:expression(this.height>this.width && this.height>150?150:true);
width:expression(this.width>this.height && this.width>150?150:true);
max-width : 150px;
max-height: 150px;
}
this will maintain aspect ratio also
It should be noted that since the workaround is actually executing javascript and not css that it will fail for users without javascript, and those with it disabled. Not a huge problem, but something that the developer may have to take into account when using this solution.
Absolutely, Matthew. Excellent point, thank you for the reminder ;)
Hey, we meet again, PP! :)
For the min/max-width property (just like the max-height) no other possibilities than use expression, but for the min-height I prefer the old !important method.
#division {height: auto !important;min-height: 10em;height: 10em;}Only for your feedback: I found again this blog by CSS Beauty News Feed :)
Hey H5N1! Wow, good to see you again :) Good to know that I am getting a little love from some of the big sites out there — wow, CSS Beauty even!
Thanks for sharing the ‘ol tried-and-true
!importantmethod with us — it will definitely be put to good use ;)Yeah, you are in the CSS Beauty feeds!
Didn’t you know? :)
For years I’ve been a sys admin and hardware technician with the passion of developing websites and now I’m changing (hope) my job.
I like to share expereance and knowledge.
By the way, even if —> there is something telling me I can’t, I’d like to say “Nice site”! :D
Looks like CSS Beauty has been keeping my server working overtime the last several days! It is unbelievable how much traffic some of the more popular sites can send with a single link..
So you left a “Nice site” comment — I guess that means I have to delete all of them! ;)