By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,022 Members | 856 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,022 IT Pros & Developers. It's quick & easy.

overflow:auto issue in XHTML standards mode

P: n/a
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>

Oct 11 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2006-10-11, ka******@hotmail.com <ka******@hotmail.comwrote:
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.
[snip]
var e = document.getElementById("eContentDiv");
e.style.height = document.body.clientHeight -
eContentDiv.offsetTop
^^^^^^^^^^^

Here you mean "e" I think. eContentDiv is not the name of any variable.

As for the problem, I think it may be related to
document.body.clientHeight which is non-standard.

Possibly window.getComputedStyle() is the proper one to use.
Oct 11 '06 #2

P: n/a
Scripsit ka******@hotmail.com:
I have a webpage that has 2 main DIVs - a title div and a content div.
So you multiposted, in addition to not posting the URL. Constructive
discussion on your problem ended before it started.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 11 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.