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”
@nooto: One more thing I forgot to mention. Your code example includes several syntax errors that may be causing problems. Specifically, consider the extra white space after your
heightproperties — removing these will help eliminate potential errors. Further, while the spacing inconsistencies present in other portions of your code may not be enough to “break” anything, using consistent (and correct) syntax throughout your CSS is good practice. Sorry if this sounds like nitpicking — I am only trying to help! ;)Thanks, finally something that really works!
I am a bit confused here. I simply want a css “width” command to be applied for ie6. I need the “page” wrapper to be 960 px
I tried this:
page {width: expression(960 + "px");}in the css file. It didn’t work
Then I tried to set the minimum width using your above code, replacing the numbers with 960 and 961. Also didn’t work. But I am not sure about your ” * html div#division ” bit of code. My division is called “page” so I just need to write #page { . . . right?
Or do I need a new css file just for ie6?
Anyway, I hope you can help. I guess it’s a simple thing but I have been trying for days!! It looks good in FF and ie7 . . but I just can’t set a width in ie6
Hi Paulo, the
* htmlis a CSS hack targeting IE6. Without it, the style(s) will be applied in other browsers as well. If you are simply trying to specify awidthfor all browsers, that is easily done with no need for the JavaScript expression:page {width: 960px;}..should do the job just fine. On the other hand, if you are trying to implement a minimum width that is applied in all browsers (including IE6), the tutorial above should provide the necessary information. I hope that helps!
Ok, Thanks a lot, you are very kind . . . . but I started with just using the “width” and it didn’t work in ie6! So you mean, ie6 should understand “width” and set the page accordingly? Nothing else needed
I would really like to read this article but I just can’t see the content.
@Paulo: yes, IE6 should understand the width property. Mayebe there’s some other declartations in conflict with this. It’s difficult troubleshooting without a complete code :)
@Jose M Estrada: Really, I can’t understand… you cannot just read it beacause it’s not visible, because its too small or what else?
Perhaps it’s time for another redesign? – Hmmm.. ;)
dude am still not clear about this !important.. can someone elaborate on that please.. thx..
Confirm readability issue in some browsers at some times.
Recommend:
1. Use higher contrast, with text darker than background.
2. Stop using whatever it is that overrides the browser’s “increase text size” feature.
Oddly, this morning in IE6, your stylesheet seems to have been skipped, so the entire thing is a very readable black-on-white with no formatting at all.
@Rajab: The
!importantrule simply designates that particular CSS property as, well, important. Nothing a quick Google search won’t clear up ;)@UniGen Head Geek: Thanks for the input regarding my theme. I am in the process of revamping things around here, and hope to resolve the readability issue once and for all. In the meantime, feel free to select the “high-contrast” stylesheet by clicking on the sun icon located in the lower-right corner of the browser window.
wow this is really kool tutorial, worked for me! Thanks