Click here to get back home

overflow:auto issue in XHTML standards mode
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
overflow:auto issue in XHTML standards mode kaczmar2 10-11-2006
Posted by kaczmar2 on October 11, 2006, 10:25 am
Please log in for more thread options

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>


Posted by Ben C on October 11, 2006, 11:21 am
Please log in for more thread options

> 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.

Posted by Jukka K. Korpela on October 11, 2006, 6:48 pm
Please log in for more thread options


Scripsit kaczmar2@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/


Similar ThreadsPosted
overflow:auto (or scoll) and height:100% September 23, 2006, 8:03 pm
how to switch on Standards-compliant mode for IE6 when using the trick w3 provided for serving xhtml as application/xml to IE January 22, 2007, 9:23 pm
Check whether browser is in quirks or standards mode? April 4, 2007, 3:30 am
Overflow to the sides of a div October 17, 2005, 3:48 pm
overflow question July 21, 2006, 5:24 pm
DIV height and overflow May 6, 2008, 11:43 am
Overflow Hidden not hiding in IE May 8, 2006, 11:44 am
Overflow: scroll scrollbar colors? November 19, 2005, 11:49 pm
aww, ciwah Regs only: overflow work April 5, 2008, 8:11 am
Auto resizing February 4, 2005, 10:33 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap