Forum Moderators: not2easy
width: expression((document.all?document.body.clientwidth:window.innerwidth)<815?"53em":"90%";));
but the browser seems to ignore that one completely. I thought it might just be this machine, but the layout for this site works fine... argh!
Anyone see what I'm doing wrong?
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #ddd;
}
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
background-position: right;
width:expression(document.body.clientWidth < 815? "53em" : "90%" );
}
#banner
{
background-color: #666;
border-bottom: 1px solid #333;
}
#banner h1
{
margin: 0;
padding: .5em;
}
#nav
{
float: right;
width: 160px;
margin-right: 10px;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content
{
padding-top: 1em;
margin: 0 200px 0 2em;
}
#content h2 { margin-top: 0; }
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Site name</h1>
</div>
<div id="nav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
</p>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p class="nextbutton">
<a href="JavaScript:history.back()">< Back to tutorial</a>
</p>
</div>
<div id="footer">
Footer stuff here
</div>
</div>
</body>
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
background-position: right;
width:
<script type="text/javascript">
expression(document.body.clientWidth < 815? "53em" : "90%" );
</script>
}
[msdn.microsoft.com...]
There is an old thread on Webmaster World that contains a better link, but as the site search is down at the moment I can't find it for you.
e.g.
your expression says if the width is less than 815 pixels then set it to 53em - but what if 53em was also be less than 815 pixels. Would that make the rule fire again (and again and again?)
(Maybe not - I'm stabbing in the dark here)
[svendtofte.com...]
and it looked like a great solution... until I tried it. His example works fine for me until I add a XHTML 1.0 transitional doctype to the page, then it crashes every time. Without the doctype it works like a charm though.
IE 6.0.26
