Go Back to Dynamic Site Solutions :: CSS

min-height for MSIE/Win

As many of you may know MSIE(4-6)/Win doesn't support min-height or min-width. (When in Standards compatibility mode, IE7 does.) This page explains one way to overcome its lack of support for min-height. Unfortunately, this method does not compensate for the lack of min-height support in older versions of Safari like it compensates for IE(5-6)/Win's. Safari 1.3+ does support min-height. Check out the related links for other methods that do compensate for both Safari's and IE(5-6)/Win's lack of min-height support.

With the default overflow setting, IE wrongly auto expands elements to fully contain all of their children, except for absolutely positioned elements, which are removed from the flow, and relatively positioned elements that are positioned so that they appear outside of the container. I'm using the Mac hack and the 'star html' hacks to only show the rule to IE(4-6)/Win.

#example3,#example4 {
  min-height: 7em;
}
/* hide from IE/mac \*/
* html #example3,* html #example4 {
  height: 9em;
  he\ight: 7em;
}
/* end hide */
height only
min-height only
min-height with the hack for IE/Win
min-height with the hack for IE/Win, now with more text to make the element expand.

Example of how IE(5-6)/Win renders the demo example of how IE5/Win renders the demo

Example of how Firefox 1.0/Win renders the demo example of how FF1.0/Win renders the demo

Related Links:

Last update: 2007-04-06