DIV, IE, strict and overflow auto

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

DIV, IE, strict and overflow auto

Post 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?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: DIV, IE, strict and overflow auto

Post 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.
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Re: DIV, IE, strict and overflow auto

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