Page 1 of 1

DIV, IE, strict and overflow auto

Posted: Sun Dec 27, 2009 9:22 pm
by SBukoski
So I have the following html document (created a slimmed-down version for ease of testing):

Code: Select all

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
    <div style="width: 100%; height: 80px; background-color: #dcdde2; background-image: url('../images/brushedmetal.jpg'); overflow: auto; margin-top: 5px; margin-bottom: 5px;">
        <table style="width: 100%" cellspacing="0">
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
            <tr><td>Column A</td><td>Column B</td></tr>
        </table>
    </div>
</body>
If I apply a transitional doctype without the URL a scrollbar appears at the right of the div since the table height exceeds the height of the div.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
If I apply a transitional doctype with the URL a scrollbar does not appear in IE7 but appears correctly for Firefox. Oddly enough, the div still scrolls, you just don't see the scrollbar. It's almost like the table is covering up the div and hiding the scrollbar.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Any thoughts as to why this would be happening and anyway to correct it?

Re: DIV, IE, strict and overflow auto

Posted: Sun Dec 27, 2009 9:30 pm
by daedalus__
thats a peculiar problem. try another document type. i use xhtml 1.1

you could probably get away with setting overflow to scroll also.

Re: DIV, IE, strict and overflow auto

Posted: Sun Dec 27, 2009 9:44 pm
by SBukoski
daedalus__ wrote:thats a peculiar problem. try another document type. i use xhtml 1.1
Tried it and the same problem arises. I only noticed it because I was cleaning up my code and moving from transitional to strict to adhere to standards better. At first I thought it had something to do with strict mode but then tested with just transitional (with and without the URL).
daedalus__ wrote:you could probably get away with setting overflow to scroll also.
When I do that, that's when you realize the table underneath is actually the full size of the div. Since the vertical scrollbar is now visible it makes the horizontal scrollbar scrollable. I've been doing lots of searches all night but have yet to find anything useful.