overflow:scroll and Doctype issue

Giganews Newsgroups
Subject: overflow:scroll and Doctype issue
Posted by:  ObjectEvolution (objectevoluti…@gmail.com)
Date: Thu, 05 Jul 2007

Hi,

I have a fairly simple page (see code below) with a div that's styled
with overflow:scroll. Given that, if there is no Doctype in the page
or it's an HTML 4 variant it works fine. If there is an XHTML Doctype
(any of them) the overflow:scroll doesn't work.

Anybody know what's going on here? Any advice?

Cheers and thanks in advance.

Jon

<html>
    <head>
        <title></title>
        <style type="text/css">

            #container
            {
                height: 95%;
            }

            #header
            {
                height: 5%;
                background-color: purple;
            }

            #leftcol
            {
                float: left;
                width: 30%;
                height: 100%;
            }

            #shots
            {
                height: 70%;
                background-color: orange;
                overflow: scroll;
            }

            #shotinfo
            {
                height: 30%;
                background-color: green;
            }

            #rightcol
            {
                float: right;
                width: 70%;
                height: 100%;
            }

            #tasks
            {
                height: 30%;
                background-color: red;
            }

            #elements
            {
                height: 30%;
                background-color: yellow;
            }

            #notes
            {
                height: 40%;
                background-color: blue;
            }

        </style>
    </head>
    <body>
        <div id="container">

            <div id="header">Header</div>

            <div  id="leftcol">

                <div id="shots">

                </div>

                <div id="shotinfo">Shot Info</div>

            </div>

            <div id="rightcol">

                <div id="tasks">Tasks</div>

                <div id="elements">Elements</div>

                <div id="notes">Notes</div>

            </div>

        </div>
    </body>
</html>

Replies