Friday, June 25, 2004

CSS: min-width and min-height with Internet Explorer

Combining the underscore hack with the ability of IE to evaluate expressions in CSS, you can set the minimum/maximum width and minimum height of an HTML element using CSS:

div.content {
	background: #eee;
	/* minimum height */
	min-height: 400px;
	/* auto height for compliant browsers */
	height: auto;
	/* min-height for IE browsers */
	_height: 400px;
	/* minimum width */
	min-width:300px;
	/* IE Dynamic Expression to set the width */
	width:expression(document.body.clientWidth < 300 ? "300px" : "100%" );
	/* maximum width */
	max-width:600px;
	/* IE Dynamic Expression to set the width */
	width:expression(document.body.clientWidth > 600 ? "600px" : "100%" );
}

This makes sure that the DIV element this is applied to is at least 400px high and 300px wide and at most 600px wide. This is a combination of Imposing Minimum Width With CSS and The Underscore Hack.

Posted by Sam at 2:13 pm

1 comment:

Ken said...

Unfortunately the expression hacks will cause IE6 to crash. One can avoid this by adding an HTML comment with 4 dashes just before your DOCTYPE declaration; the only caveat being that this essentially throws IE6 into quirks mode where *nothing* works correctly. Sure, you can assign a minimum width to an element but good luck trying to center it with margin: 0px auto;.

Does anyone have a better means of going about this? I refuse to change the layout specifically for IE, and I'd hate to have to serve a tables-based version to IE users..

6:22 pm, May 27, 2005

Post a Comment