[solved] CSS gurus' help required

cmb · Post by **cmb** » Sat Oct 08, 2011 12:25 am

Hello CSS gurus,

I have a problem with a "simple" layout:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>title</title>
</head>
<body>
    <h1>title</h1>
    <div style="width:110px;overflow:scroll">
    <div style="width:300px">
    <div style="position:relative;float:left;background:red;width:100px;height:100px">
	<div style="position:absolute;top:10px;left:10px">hllo</div>
    </div>
    <div style="position:relative;float:left;background:green;width:100px;height:100px">
	<div style="position:absolute;top:10px;left:10px">hllo</div>
    </div>
    <div style="position:relative;float:left;background:blue;width:100px;height:100px">
	<div style="position:absolute;top:10px;left:10px">hllo</div>
    </div>
    </div>
    </div>
</body>
</html>

It renders as expected (a small square box with a scroll bar) in current versions of FF, Chrome, Opera and IE. But in IE6/7 it doesn't, until I force quirks mode

I'm totally confused

Could somebody please explain what I did wrong.

Christoph

PS: According to http://www.quirksmode.org/bugreports/ar ... raint.html this is a bug in IE6/7, but it seems that the workaround posted by Dusty is a viable solution.