Setting body width dynamically

Forum Moderators: not2easy

Message Too Old, No Replies

Setting body width dynamically

polenz

10:17 pm on Jul 30, 2008 (gmt 0)

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

birdbrain

11:15 am on Jul 31, 2008 (gmt 0)

Hi there polenz,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><!--[if lte IE 6]>
<style type="text/css">
html,body {
width:expression(
document.body.clientWidth<'1258'?
document.body.style.width='1258px':
document.body.style.width='100%' 
);
} 
</style>
<script type="text/javascript">
window.onload=function(){
alert('Width: ' + document.body.currentStyle.width);
}
</script>
<![endif]-->
</head>
<body>
<div></div>
</body>
</html>

Notes:-

1. The css requires htm,body instead of body.

2. The expression requires document.body.style.width= instead of just the value.

3. The alert requires document.body.currentStyle.width to acces the stylesheet.

4. Conditional comments have been used to hide the css and javascript from other browsers.

birdbrain

p.s. I have just noticed that IE 7 gives the width value in pixels and IE 6 gives the width value as auto. This luckily has no effect on the outcome. :)