Matt Garrett

For a long time now CSS has had the following properties: max-width, min-width, max-height, and min-height. Unfortunately, Internet Explorer 6 does not interpret them. I have elaborated on a way to induce similar behavior using Javascript expressions in CSS. The Javascript uses a nested inline if statement. This trick will validate if you wrap it in a conditional comment.

View the working Demo. The demo is a little different in that the logic is wrapped in a function. No unreadable inline ifs.

Here’s the CSS with the Javascript expression:

The logic explained: If the Browser’s window minus optional margins is less than the minimum width (740).

      (document.body.clientWidth - 40 - 40) < 720 ?

Set the width of the element to the minimum width (720).

         "720px" :

Else if the Browser window minus optional margins is greater than the maximum width (944).

            (document.body.clientWidth - 40 - 40) > 944 ?

Set the element’s width to the maximum width (944).

               "944px" :

Else, set the element’s width to 100%.

               "100%"

IE isn’t using the max/min-width/height CSS properties, but you end up with something that works. I should also note that I haven’t tested this in IE 5 and IE 5.5. I installed IE7 Beta2 and it appears that it discards the expression() in the CSS. IE7 will read the normal CSS properties. (I do not recommend installing the Beta. I had to do some rooting around to find a way to remove IE7 Beta from my machine.)

A big hurdle in coming to this solution was that I couldn’t access the DOM in IE within that expression. I couldn’t use getElementById(). This would’ve allowed me to avoid using those optional margin values in the conditional. I would’ve also been able to use some of the functions provided from the Prototype library.

This entry was posted on Thursday, February 9th, 2006 at 12:43 pm and is filed under web, code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.