DIV, IE, strict and overflow auto
Posted: Sun Dec 27, 2009 9:22 pm
So I have the following html document (created a slimmed-down version for ease of testing):
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.
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.
Any thoughts as to why this would be happening and anyway to correct it?
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>Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">