Dynamically changing body width [Archive]

View Full Version : Dynamically changing body width

polenz

07-30-2008, 10:20 PM

Hello, I was wondering how I can change the width of the body using and expression in CSS. The application I'm working on will only run in ie6 so I don't have to worry about other browsers. With IE6 I can't use min-width or max-width which would have been nice. What I'm trying to do is change the width to 1258px if the width is less than 1258 and set it to 100% if the width is over 1258. So if the screen resolution is 1400 wide then body width will be 100%. Width will always be a minimum of 1258px.

In the css I have the following:
body
{
width:expression(document.body.clientWidth < 1258? "1258px": "100%" );
}

In the bottom of my default.aspx page underneath the body tag I have this:
<script type="text/javascript">
{
alert("Width: " + document.body.clientWidth);
}
</script>

But Width never changes to equal what I have in the expression when I run the javascript. How do I get the expression to un in the CSS file? Is the expression incorrect?

Thanks

jscheuer1

07-31-2008, 08:23 AM

document.body.clientWidth (in quirksmode) is always the width of the window. So whenever you alert:

alert("Width: " + document.body.clientWidth);

as long as the width of the window hasn't changed, the number reported will not either. To get a better idea of the actual width of the body element, use:

alert("Width: " + document.body.offsetWidth);

However, if you are using this on a page with a valid URL DOCTYPE, you will need to use document.documentElement instead of document.body in your expression in the css:

body
{
width:expression(document.documentElement.clientWidth < 1258? "1258px": "100%" );
}

Try this though (notice the valid URL DOCTYPE):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
width:expression(document.documentElement.clientWidth <= 1258? "1258px": "auto" );
border:1px solid red;
}
</style>
</head>
<body>
<script type="text/javascript">
alert(document.body.offsetWidth)
</script>
</body>
</html>

The default for the body is 100% (minus margins and/or padding), so by making it auto when there is more room, it will still be 100% without being larger than the window. The red border will give you a visual key to where the edges of the body are. You can remove it later, once you are satisfied that things are working.

polenz

07-31-2008, 03:16 PM

Thanks. That works for me.