Jump to content

Archived

This topic is now archived and is closed to further replies.

AndyB

max-width question

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.