Latest TweetsHeads up: Blasty (DMCA service) MIA: perishablepress.com/avoid-blas…
Perishable Press

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.

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
73 responses
  1. Hi
    The tip you have given is great. I’m working on a fluid website – my first one – (I haven’t put it on the web yet) for my hostel. The javascript works great in IE when I reduce the screen size of IE (7) from a maximized position, but when I return it to its original maximized state, the site stays at the same minimum widths/heights and doesn’t expand again. Is there any way around this? To re-flow the content? Or should I use some other method?
    THanks.

  2. @Kumal: It depends… Have you set measurements in pixel, em or percentage?
    It depends from many other cases too… If you want U can email me at H5N1.vir [at] gmail.com

  3. Hi again
    Well, I was using percentages and realized my mistake as soon as I left my comment. I’ve just altered the condition to 0.x * this.parentNode.clientWidth/scrollHeight and it works fine now.

  4. Jeff Starr

    @Kunal: Glad to hear you got it worked out ;)

    @H5N1: Thank you for your willingness to help :)

  5. @Kunal: I’m glad too. :)
    Hope my last post gave you a clue to find the solution. :)
    @Perishable: knowledge is nothing whitout sharing! :)

  6. Joomlabased January 1, 2008 @ 2:58 pm

    Really good article it will help lots. Thank you :)

  7. Jeff Starr

    My pleasure — happy to help!

  8. Great article. Unfortunately, when I made some changes to include a min-width property, IE still freezes and crashes for me.

    #wrapper {
       min-width: 750px;
       position: relative;
       padding: 5px;
       margin: 0 auto;
       text-align: left;
    }

    /*Min-width not working for me*/

    * html div#wrapper {
    width: expression( document.body.clientWidth < 750 ? "750px" : "auto" );
    }

    Can you please advise as to what I am doing incorrectly or am missing?

    I would greatly appreciate it! Thank you

  9. Jeff Starr

    Hi E,

    Check out comment #5 for some information that may help you..

  10. i did and am still experiencing the freeze and crash unfortunately.

    i tried if < 750? “749px” ; “auto” and i still had the problem.

  11. Jeff Starr

    It is difficult to “guess” at the source of the issue.. do you have a link to a page demonstrating the problem? An actual test case would be very helpful.. If you prefer, send a link via email (scroll down for email links).

  12. @E: it depends.
    The crash may occurr in different cases. I notice you’re using relative positioning: this make me think at some IE6 bugs.

    1 – If you’re using some javascript parsing a “display : none” property
    2 – If you’re using some kind of opacity modificato rstuff (like filter alpha)
    3 – if the relative positioned element contains some absolute positioned block and you’re trying to parse the node with javascript
    4 – If IE is not updated! :)
    5 – If it’s IE!
    5 – Some other non-documented bug

    Obviously a link to the page can be of some help, Can you host it?

[ Comments are closed for this post ]