By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 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


ka******@hotmail.com wrote:

So my question is: how can I get this page to appear the same way in
standards mode and quirks mode?
document.compatMode tells you whether the page is being rendered in
quirks mode or standards mode.
In standards mode you should look at document.documentElement and not
document.body to find any offset.
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/compatmode.asp>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 11 '06 #2

P: n/a
Thank you very much, this works in IE just like I needed. However,
This page is in an IFrame, and when the window is resized, the page no
longer puts the scrollbar under the "menu" div - it puts it on the side
of the broswer - although the JS code looks like it reporting the
correct size.

Is there any other trick if this page is to be the source of an IFrame,
and the broswer window is resized?

Christian

Martin Honnen wrote:
ka******@hotmail.com wrote:

So my question is: how can I get this page to appear the same way in
standards mode and quirks mode?

document.compatMode tells you whether the page is being rendered in
quirks mode or standards mode.
In standards mode you should look at document.documentElement and not
document.body to find any offset.
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/compatmode.asp>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 11 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.