Min-height, Min-width, & IE6

By Nick Little on September 17, 2008 at 6:30 am in General, Technical, css

There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.

Min-height can be achieved in IE6 by using a conditional HTML comment and the height CSS property. It turns out that Microsoft decided that the height CSS property in IE6 and below should actually be the minimum height. We can put this inside a style tag in the HTML comment after the initial CSS. This way all other browsers will not see the CSS.

<style type="text/css">
  .minheightclass { min-height: 100px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minheightclass { height: 100px; }
</style>
<![endif]-->

Make sure that the element with the min-height does not have overflow: auto. It will not work in that case. You will need to override the overflow in the IE6 conditional comment in order for it to work.

Min-width in IE6 is a little bit trickier and it requires javascript to be enabled. We will still use the conditional HTML comment, but we will have to add a Microsoft proprietary CSS expression. A CSS expression allows some javascript code to dynamically determine the value of a CSS property. We will apply the expression to the width property.

<style type="text/css">
  .minwidthclass { min-width: 350px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minwidthclass { width: expression(this.clientWidth > 350 ? "100%" : "350px"); }
</style>
<![endif]-->

Be careful when using this hack as it can cause the browser to lock up if you get the values wrong.