Topic: Max-Width in IE (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=25115" title="Pages that link to Topic: Max-Width in IE (Page 1 of 1)" rel="nofollow" >Topic: Max-Width in IE <span class="small">(Page 1 of 1)</span>\

 
kuckus
Paranoid (IV) Mad Librarian

From: Glienicke
Insane since: Dec 2001

IP logged posted posted 02-25-2005 20:19 Edit Quote

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:

code:
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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 02-26-2005 01:46 Edit Quote

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.


 

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 02-26-2005 02:16 Edit Quote

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.

kuckus
Paranoid (IV) Mad Librarian

From: Glienicke
Insane since: Dec 2001

IP logged posted posted 02-26-2005 11:53 Edit Quote

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.

code:
<!--[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)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 02-26-2005 18:45 Edit Quote

A cleaner method is :

code:
<!--[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)

kuckus
Paranoid (IV) Mad Librarian

From: Glienicke
Insane since: Dec 2001

IP logged posted posted 02-26-2005 20:16 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 02-26-2005 20:38 Edit Quote

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.

kuckus
Paranoid (IV) Mad Librarian

From: Glienicke
Insane since: Dec 2001

IP logged posted posted 02-26-2005 20:48 Edit Quote

ah. almost suspected you would have heard of them already

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 02-26-2005 21:43 Edit Quote

Internet Explorer 5.01 + 5.5 + 6 at the SAME time

Purplejacket
Obsessive-Compulsive (I) Inmate

From: San Francisco
Insane since: Mar 2005

IP logged posted posted 03-31-2005 02:54 Edit Quote

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)

Purplejacket
Nervous Wreck (II) Inmate

From: San Francisco
Insane since: Mar 2005

IP logged posted posted 04-01-2005 21:21 Edit Quote

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:

code:
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?



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu