Fix min or max height and width in IE6

Tags: 

Setting min or max size in IE6 is not supported. If you want to limit your content dynamically by CSS, there is not possible. However, IE6 is support expression value which allow using javascript to set value in stylesheet.

min-width in IE6

  1. div {
  2.         min-width: 500px;
  3.         width:expression(this.parentNode.offsetWidth < 500 ? "500px" : "auto");
  4. }
Hide/show line number

The code above will set width to default value (auto) and in the min-width supported browser it will set the minimum value of width correctly. IE (especialy IE 6) could understand the expression value and it will evaluate that line.

max-width in IE6

  1. div {
  2.         max-width: 500px;
  3.         width:expression(this.parentNode.offsetWidth < 500 ? "500px" : "auto");
  4. }
Hide/show line number

min-height in IE6

  1. div {
  2.         min-height: 500px;
  3.         height:expression(this.parentNode.offsetHeight < 500 ? "500px" : "auto");
  4. }
Hide/show line number

max-height in IE6

  1. div {
  2.         max-height: 500px;
  3.         height:expression(this.parentNode.offsetHeight > 500 ? "500px" : "auto");
  4. }
Hide/show line number

min-width in IE6 on the body is special because there is not parent of body

  1. body {
  2.         width:expression((d=document.compatMode) == "CSS1Compat" ? documentElement:document) && (d.clientWidth < 501 ? "500px" : "auto");
  3. }
Hide/show line number

Using expression to fix some problem for IE 6 must be carefull. Because of the higher version of IE are now support for min-width and min-height property, but they still work with expression value in CSS and it let your website to be low performance. Particularly, the higher version of IE (Ex: IE 9) may display a pop-up to ask user if they allow your script or ActiveX control running. So, only contain the fixing on IE 6 and do not on the higher version.

Inline CSS stylesheet may follow:

  1.         min-width: 500px;
  2. <!--[if lte IE 6]>
  3. <style>
  4.         width:expression(this.parentNode.offsetWidth < 500 ? "500px" : "auto");
  5. </style>
  6. <![endif]-->
Hide/show line number

This fixing stylesheet only active when user using IE 6 and lower, other browser will execute the default stylesheet and set the min-width to be 500px. All browser except Internet Explorer will not understand expression value and it won't be executed. In IE, it will see the conditional comment <!--[if lte IE 6]>, and only browser that match the condition will run its containing stylesheet (in this example is IE version less than or equal to 6).