max-width question

[AndyB]

Odd client request to have a liquid layout but displayed width not to exceed 1024px (it's a very, very, long, story).

With 'good' browsers, this works fine:
[code]body {
max-width:1024px;
}[/code]
All I need is the IE-variant. [a href=\"http://www.svendtofte.com/code/max_width_in_ie/\" target=\"_blank\"]http://www.svendtofte.com/code/max_width_in_ie/[/a] explains, but I'm not getting it :(

Anyone care to help me out with the right, working, IE workaround to set the body max-width?

[obsidian]

hey, andy, it's a pretty neat trick. here's basically what he's saying:
[code]
p {
border:1px solid red;
max-width:1024px;
width:expression(document.body.clientWidth > 1024 ? "1024px" : "auto" );
}
[/code]

that should fix it for you (at least in IE5+) according to the document. basically, you're using a snippet of javascript to test your width and only allow your content to get to that width, but if it's below, it will use the "auto" attribute for your width.

[AndyB]

I thought it was a neat trick as well. Here's how I applied it
[code]
body {
    color:#000;
    background:url('../images/page-bg2.gif');
    font-family: verdana, arial, helvetica, sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    max-width:990px;
    width:expression(document.body.clientWidth > 990 ? "990px" : "auto" );
}[/code]
Works fine with FF, but has no effect with IE6 (on a PC at 1200px resolution). What I know about expressions would fit on the head of a pin ... did I mess up the CSS or can't that trick be used on body.

[obsidian]

hmm... good question, i've never tried to limit body width before. i've used similar fixes on wrapper divs. why don't you try putting a wrapper div around your WHOLE content and applying the fix to that div instead.

i did experiment and found that IE doesn't calculate clientWidth like FF does anyway. i came up with about 32 pixels different in the rendering of the screen. the following worked for me to do an 800px max-width:
[code]
body {
    margin: 0;
    padding: 15px;
    background-color: #f4f4f4;
}

#wrapper {
    color:#000;
        background-color: #ffffff;
        border: 1px solid #cccccc;
    font-family: verdana, arial, helvetica, sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    max-width:800px;
    width: expression(document.body.clientWidth > 832 ? "800px" : "auto");
}
[/code]

i was able to get your 990px to work with using 1022 as the cutoff in the expression().

hope this helps

[AndyB]

Thank you. That looks promising and I'll give it a shot (when I have access to the supersized monitor). Fortunately I already have a 'container' div that's doing another job on the page and I should be able to modify its properties with the max-width fixes so I'll avoid changing any html pages and just doing it with wonderful CSS.

It looks as though it isn't going to work on the body element so it's a lucky break that I already had a suitable container div I could re-style.