Jump to content


Photo

max-width question


  • Please log in to reply
4 replies to this topic

#1 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 09 March 2006 - 06:21 PM

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:
body {
max-width:1024px;
}
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?
Legend has it that reading the manual never killed anyone.
My site

#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 09 March 2006 - 06:35 PM

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

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 09 March 2006 - 07:17 PM

I thought it was a neat trick as well. Here's how I applied it
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" );
}
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.
Legend has it that reading the manual never killed anyone.
My site

#4 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 09 March 2006 - 08:09 PM

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:
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");
}

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

hope this helps

You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#5 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 10 March 2006 - 02:12 AM

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.
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users