Jump to content

max-width question


AndyB

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.