Setting min-width and max-width in IE 6

Internet Explorer 6 doesn’t support the min-width and max-width styles. But we can use expressions to get around this. Expressions are something IE supports that allows you to set a css value to the result of a javascript statement.

Here is how we can set a minimum width of 960 pixels in IE6.

* html .myClass{width:expression(documentElement.clientWidth < 960 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 960 ? "960px" : "auto") : "960px") : "auto")}

What this says is that if the width of the element with class of myClass is less than 960 pixels, set the width to 960px else set it to auto (which will preserve the current size). There is extra code in here to account for whether or not your page is set to use xHTML or HTML in the doctype, which changes the object reference for the body tag (xHTML uses documentElement intead of body).

I’ve found this article on the web, which says that reqular expressions are very expensive on the page, and you should use javascript instead.

And also this article, which says that the browser can freeze if you set the width of the browser to the same value. It suggests tweaking the code to something like this, instead:

* html .myClass{width:expression(documentElement.clientWidth < 962 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 962 ? "960px" : "auto") : "960px") : "auto")}

Probably good to do that to be on the safe side.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s