overflow:auto issue in XHTML standards mode

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kaczmar2@hotmail.com
    #1

    overflow:auto issue in XHTML standards mode

    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.dt d">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>Ti tle</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.addEven tListener)
    {
    // Mozilla/W3C
    window.addEvent Listener('load' , handleResize, false);
    window.addEvent Listener('resiz e', handleResize, false);
    }
    else if (window.attachE vent)
    {
    // IE
    window.attachEv ent('onload', handleResize);
    window.attachEv ent('onresize', handleResize);
    }
    }

    function handleResize()
    {
    try {
    var e = document.getEle mentById("eCont entDiv");
    e.style.height = document.body.c lientHeight - eContentDiv.off setTop
    + "px";
    e.style.width = document.body.c lientWidth + "px" ;
    }
    catch ( ex ) {
    /**/
    }
    }
    </script>

    </head>
    <body class="contentB ody" onload="Init(); ">

    <form method="post" action="test.ht ml" id="frmMain">

    <!-- banner -->
    <div class="contentT itleBar" style="backgrou nd-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>

    Tags: None
    • Martin Honnen
      #2
      Re: overflow:auto issue in XHTML standards mode



      kaczmar2@hotmai l.com wrote:

      So my question is: how can I get this page to appear the same way in
      standards mode and quirks mode?
      document.compat Mode tells you whether the page is being rendered in
      quirks mode or standards mode.
      In standards mode you should look at document.docume ntElement 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
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/

        Comment

        • kaczmar2@hotmail.com
          #3
          Re: overflow:auto issue in XHTML standards mode

          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:
          kaczmar2@hotmai l.com wrote:
          >
          >
          So my question is: how can I get this page to appear the same way in
          standards mode and quirks mode?
          >
          document.compat Mode tells you whether the page is being rendered in
          quirks mode or standards mode.
          In standards mode you should look at document.docume ntElement 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/

            Comment

            Previous template Next
            Working...