PDA

View Full Version : Elastic layout with em- can I set a min-width via expression in IE

abduraooft
06-27-2008, 05:33 PM
Hi all,

I've been trying to learn creation of elastic layouts with em (following http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)

Please have a look at an example there http://jontangerine.com/silo/css/elastic-layout/

I want to set a min-width for that wrap, in IE too, say a 700px. Tried to use the expression(), but

#wrap{
width:expression(document.body.clientWidth < 700 ? "700px" : "100%" );
} doesn't work as the width of body is not getting changed when we zoom the text/layout.

Can I make something like
width:expression(document.wrap.clientWidth < 7000 ? "700px" : "100%" ); ? Any help would be appreciated.
Candygirl
06-27-2008, 06:13 PM
Yes you can but it's not that simple. I've wrote sometimes an article about how to do it (but it's in French ;) ). I'm gonna try to translate the essential.

In this tutorial (http://www.svendtofte.com/code/max_width_in_ie/) you'll find the base to do it:

width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );

500/12 is given as a magic number with 30em. From that we can deduce it for 1em:

500/12 / 30 => 25/18.

Then you just need to make a multiplication with the number of em you need. For example 47em:

width:expression(
document.body.clientWidth > (25/18) * 47 *
parseInt(document.body.currentStyle.fontSize)?
"47em":
"auto" );

BUT, yes, there is a but ;) If you define a font-size for the body, then document.body.currentStyle.fontSize will return the fixed number for font-size in the css. This is a problem when you use something like this to reset the font-size for the whole site:

body {font-size:75%;}

The only issue I found is to use a container inside the max-width container to set the font-size instead on the body itself.

Edit: that was a "long" time ago (about 2years) I've never searched again for other solutions
abduraooft
06-28-2008, 08:07 AM
Wow! that's great. I've given font-size:1em; to the body and it worked like a charm.
Thank you so much.
Candygirl
06-28-2008, 10:50 AM
Are you sure?

I've tested right now and IE6 seams to act as if you've set a width not a max-width ?

document.body.currentStyle.fontSize always returns 1 whatever text-size you choose in the navigator's preferences, logicaly document.body.clientWidth is always greater then (25/18) * 47 * parseInt(document.body.currentStyle.fontSize) and that's why it applies the number of em you've given even when the window is small.

Seams to me that you really mustn't declare any font-size in html and body to make it work correctly (if you set it to html it's inherited by the body and won't work either).

This is the example I've tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>em max-width</title>
<style type="text/css">
* {margin:0;padding:0;}

body {font-family:Arial, Helvetica, sans-serif;font-size:1em; }

#main {
background:#99F;
height:5em;
max-width:48.56em;
}

</style>

<!--[if lt IE 7]>
<style type="text/css">
#main {
width:48.56em;
width:expression(
document.body.clientWidth > (25*48.56/18) *
parseInt(document.body.currentStyle.fontSize)?
"48.56em":
"auto"
);
}
</style>
<![endif]-->

</head>
<body>
<p id="main">This should be 777px width with normal font-size</p>
</body>
</html>