overflow:auto issue in XHTML standards mode

Discussion in 'Javascript' started by kaczmar2@hotmail.com, Oct 11, 2006.

  1. Guest

    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, 2006
    #1
    1. Advertising

  2. 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/
     
    Martin Honnen, Oct 11, 2006
    #2
    1. Advertising

  3. Guest

    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:
    > 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, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John J Lee
    Replies:
    3
    Views:
    518
    bruno at modulix
    Dec 1, 2005
  2. Edward Loper
    Replies:
    0
    Views:
    503
    Edward Loper
    Aug 7, 2007
  3. John J Lee
    Replies:
    0
    Views:
    541
    John J Lee
    Aug 7, 2007
  4. Edward Loper

    mmm-mode, python-mode and doctest-mode?

    Edward Loper, Aug 9, 2007, in forum: Python
    Replies:
    0
    Views:
    454
    Edward Loper
    Aug 9, 2007
  5. linkswanted
    Replies:
    1
    Views:
    968
Loading...

Share This Page