What's new? | Help | Directory | Sign in
Google
             
Search
for
Updated Sep 11, 2008 by pilgrim
ArticleMinWidthIE6  
How to replicate the functionality of min-width in IE6

Introduction

One of the most frustrating CSS deficiencies of IE6 is the inability to handle the min-width property. A common workaround is to use an Expression to imitate it.

Details

The following code will enforce a min-width restriction of 900px:

<style type="text/css">
body { min-width: 900px; }
</style>

<!--[if IE]>
<style type="text/css">
body {
  width:expression( documentElement.clientWidth < 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 900 ? "900" : "auto") : "900px") : "auto" );
}
</style>
<![endif]-->

Comment by fierodrew, May 17, 2008

Also, as IE also exhibits the "Expanding Box" bug and ignores !imporant, min-width on an element can be set by merely using the width property:

width: auto !important; width: 800px; min-width: 800px;

Comment by udioron, Jul 21, 2008

Be VERY cautious with JS expressions in css: This kind can cause IE6 to lock without any warning or reasonable explanation in a non traceable way, but only sometimes :-).

It took me two days to spot that this little "feature" was causing problems on random computers (and never on my PC!).

Any modern javascript framework should be able to give you the same functionality, while still keeping the same code across different browsers.

Comment by Alex.D.ayon, Sep 03, 2008

that expression value is kinda wrong. I saw in a different place that the number has to be lower than the "" number for exemple

max width: width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); / sets max-width for IE / (see the number there, its lower than the number in the "", this is to make sure the browser wont crash/lock)

min width:

width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); / set min-width for IE

max height:

height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); / sets max-height for IE /

min height:

height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); / sets min-height for IE /

taken from http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/


Sign in to add a comment