The HTML below validates ok but behaves differently within FireFox, Opera and IE6/7.
I have a scrolling div containing a yellow box and a green box side by side (both also <div>'s). The content of the yellow box scrolls fine in all browsers but the content of the green box only does so 'correctly' in FireFox. In IE6/7 the content simply overflows the containing <div> and Opera gives a combination of the IE & FF behaviour.
The yellow box contains a series of small overlapping boxes which use absolute positioning which I suspect is the root of the problem but I'd prefer to keep it that way as this code is just an example of a bigger problem where the positioning is generated by vbscript code.
Any help would be appreciated. I'd like to get them all behaving like Firefox. Thanks in advance.
I have a scrolling div containing a yellow box and a green box side by side (both also <div>'s). The content of the yellow box scrolls fine in all browsers but the content of the green box only does so 'correctly' in FireFox. In IE6/7 the content simply overflows the containing <div> and Opera gives a combination of the IE & FF behaviour.
The yellow box contains a series of small overlapping boxes which use absolute positioning which I suspect is the root of the problem but I'd prefer to keep it that way as this code is just an example of a bigger problem where the positioning is generated by vbscript code.
Any help would be appreciated. I'd like to get them all behaving like Firefox. Thanks in advance.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style TYPE="text/css">
<!--div.box {background-color:rgb(204,255,255); border: 2px solid blue;
position:absolute; text-align:center; overflow:hidden;
width:40px; height:25px; }
-->
</style>
</head>
<body style="font-size:7pt; font-weight:normal;">
<div style="height:170px; width:auto; margin-left:12px; overflow:scroll;
border: solid 1px;">
<div style="float:left; height:275px; width:100px; border: solid 1px black;
background-color:yellow; ">
Mark Masters
<br>Pete Mason
<br>Joe Wills
<br>Nina Peters
<br>Tara Tomkins
<br>Paula Smith
<br>Dana Lister
<br>Bill Wither
<br>Cilla Stevens
<br>Tilly Jones
<br>Tania Paul
<br>Sue Thomas
<br>Mary Brown
<br>Heidi Smith
<br>Rob Masters
<br>Anita Lenovic
<br>Katy Wallace
<br>John Moss
</div>
<div style="border-style:solid; border-width:1px; margin-left:4px; background-color:lightgreen;
height:275px; width:432px; overflow:hidden; position:relative;">
<div class="box" style="top: 20px; left: 20px; ">Test Box 1</div>
<div class="box" style="top: 40px; left: 50px; ">Test Box 2</div>
<div class="box" style="top: 60px; left: 80px; ">Test Box 3</div>
<div class="box" style="top: 80px; left:110px; ">Test Box 4</div>
<div class="box" style="top:100px; left:140px; ">Test Box 5</div>
<div class="box" style="top:120px; left:170px; ">Test Box 6</div>
<div class="box" style="top:140px; left:200px; ">Test Box 7</div>
<div class="box" style="top:160px; left:230px; ">Test Box 8</div>
<div class="box" style="top:180px; left:260px; ">Test Box 9</div>
<div class="box" style="top:200px; left:290px; ">Test Box 10 </div>
</div>
</div>
</body>
</html>