K
kaczmar2
I have a webpage that has 2 main DIVs - a title div and a content div.
I want the title dive to always "stick to the top of the page and
not scroll, regardless of the size of the window. The content div
should have a scrollbar that sits underneath the title div. I have
some event handlers in Javascript that handle calculating the size of
the content div.
Everything works fine in IE/Firefox when I remove the DTD from my
document (quirks mode) but in standards mode I get the scrollbar for
the
whole window and both the content div and title div scroll. The code
is below. If you comment out the DOCTYPE line to render in qirks
mode you will see the behavior I want.
So my question is: how can I get this page to appear the same way in
standards mode and quirks mode?
Any help on this is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Title</title>
<style type="text/css">
.contentBody
{
font-weight: normal;
font-size: 10pt;
margin: 0px;
color: #000000;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff
}
</style>
<script type="text/javascript">
function Init()
{
if (window.addEventListener)
{
// Mozilla/W3C
window.addEventListener('load', handleResize, false);
window.addEventListener('resize', handleResize, false);
}
else if (window.attachEvent)
{
// IE
window.attachEvent('onload', handleResize);
window.attachEvent('onresize', handleResize);
}
}
function handleResize()
{
try {
var e = document.getElementById("eContentDiv");
e.style.height = document.body.clientHeight - eContentDiv.offsetTop
+ "px";
e.style.width = document.body.clientWidth + "px" ;
}
catch ( ex ) {
/**/
}
}
</script>
</head>
<body class="contentBody" onload="Init();">
<form method="post" action="test.html" id="frmMain">
<!-- banner -->
<div class="contentTitleBar" style="background-color:#000099;
color:#FFFFFF; height:32px; width:100%; overflow:hidden;">
<b>Title Content</b>
</div>
<!-- The Content DIV -->
<div id="eContentDiv" style="overflow:auto; width:100%;">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</form>
</body>
</html>
I want the title dive to always "stick to the top of the page and
not scroll, regardless of the size of the window. The content div
should have a scrollbar that sits underneath the title div. I have
some event handlers in Javascript that handle calculating the size of
the content div.
Everything works fine in IE/Firefox when I remove the DTD from my
document (quirks mode) but in standards mode I get the scrollbar for
the
whole window and both the content div and title div scroll. The code
is below. If you comment out the DOCTYPE line to render in qirks
mode you will see the behavior I want.
So my question is: how can I get this page to appear the same way in
standards mode and quirks mode?
Any help on this is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Title</title>
<style type="text/css">
.contentBody
{
font-weight: normal;
font-size: 10pt;
margin: 0px;
color: #000000;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff
}
</style>
<script type="text/javascript">
function Init()
{
if (window.addEventListener)
{
// Mozilla/W3C
window.addEventListener('load', handleResize, false);
window.addEventListener('resize', handleResize, false);
}
else if (window.attachEvent)
{
// IE
window.attachEvent('onload', handleResize);
window.attachEvent('onresize', handleResize);
}
}
function handleResize()
{
try {
var e = document.getElementById("eContentDiv");
e.style.height = document.body.clientHeight - eContentDiv.offsetTop
+ "px";
e.style.width = document.body.clientWidth + "px" ;
}
catch ( ex ) {
/**/
}
}
</script>
</head>
<body class="contentBody" onload="Init();">
<form method="post" action="test.html" id="frmMain">
<!-- banner -->
<div class="contentTitleBar" style="background-color:#000099;
color:#FFFFFF; height:32px; width:100%; overflow:hidden;">
<b>Title Content</b>
</div>
<!-- The Content DIV -->
<div id="eContentDiv" style="overflow:auto; width:100%;">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</form>
</body>
</html>