Topic: Max-Width in IE

If this trick isn't old news for everybody then check this link:

http://www.svendtofte.com/code/max_width_in_ie/


All you need for a max-width of, say, 1024px is this:

max-width: 1024px;

                 width: expression(document.body.clientWidth > 1024? "1024px": "100%" );

Works well in everything from EI 5 upwards and of course any browser that understands the real max-width.

It's a pretty good deal really, I've used it on two sites since I came across the page a few weeks back and there aren't any complaints so far


kuckus

But it's not standard-compliant code! What if, in the future, a new CSS feature with the name "expression" came along which worked differently than IE's current implementation? This code would break and need to be fixed. When writing code that's meant to work in broken browsers, it must be remembered that first priority is to write code that, when read by the "perfect" browser, will have no errors.


 

I have to agree with Slime. Such work arounds should be put in a dedicated CSS.

I haven't tested this expression, but IMO the it should check the offsetWidth property of the element designed by the CSS selector and not document.body.clientWidth.

OK, that's a point! As a workaround, how about putting the 'width: expression(...)' into conditional comments? That way, IE would ignore the standard 'max-width' and the perfect browser would ignore the comments.

<!--[if IE 5]>

<style type="text/css">

        #container {

                width: expression(document.body.clientWidth > 1024? "1024px": "100%" );

        }

</style>

<![endif]-->

Again, it's more of a hack than anything else, of course, but when max-width is what I need for my layout and it isn't possible to do it 'correctly' in IE, then I think I can live with it.

//edit:

poi - Generally offsetWidth might be the safer bet, but in my case it was for a <div> that serves as a container for the whole page, so clientWidth worked just as well....


kuckus

(Edited by kuckus on 02-26-2005 11:55)

A cleaner method is :

<!--[if gte IE 5]>

<style type="text/css">



#CssSelector

{

	width:expression( Math.min( parseInt(this.offsetWidth), 250 )+"px");

}





</style>

<![endif]-->

It works in IE6. I no longer have IE5.01 and IE5.5 on my computer



(Edited by poi on 02-26-2005 18:47)

Some more links in the FAQ:

How can I use the 'max-width' CSS property in Internet Explorer?

quote:

---

poi said:

I no longer have IE5.01 and IE5.5 on my computer

---

But there are downloadable archives of both which you can extract ot any folder and run from there - IE 5.01 here:
http://www.grochtdreis.de/download/ie5_01.zip

and 5.5sp2 here:
http://www.grochtdreis.de/download/ie5_5.zip

Explanation and some discussion:
http://labs.insert-title.com/labs/article795.aspx

(Edited by kuckus on 02-26-2005 20:23)

Thank you.
The "installs" of IE3-5.5 are on my datas server, but since the last re-install of my main computer I haven't needed them.

ah. almost suspected you would have heard of them already

Internet Explorer 5.01 + 5.5 + 6 at the SAME time

I was able to get the IE resizing to work, but had some issues.
1) The style call could not be on the body tag; I had to put the style="width:expression etc...." part on a table tag within the body. (Note that I actually used a class .. the foregoing was just a quickie.)
2) Running IE6 winXP SP2 I get an ActiveX 'warning' and have to click the bar and indicate "ok" to get the functionality. This might be less than good when deploying to a couple hundred clients on an intranet (let alone the wwweb).

(Edited by Purplejacket on 03-31-2005 02:56)

An update on my last post:
2) Running IE6 winXP SP2 I get an ActiveX 'warning' and have to click the bar and indicate "ok" to get the functionality. "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..." However, this doesn't occur when viewed over a web server, only with a local file, so I guess it's not an issue.

Now: I can get fancy in IE and do the following:

width:expression(document.body.clientWidth > Math.min(screen.width,1024) ? Math.min(screen.width,1024) + "px": "auto" );

i.e. IE will limit my display to the smaller of 1024 and the client screen width (e.g. 800).
Question: Is there a way to do this with CSS?