Guys I have the following CSS code, works fine with Firefox, Chrome but breaks like hell when i run it in IE7!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Box Test</title>
<style type="text/css">
.mybox { float:left; overflow:auto; visibility:visible;
width:220px; height:100px;
margin:3px; padding:10px;
border-left:1px solid gray; border-right:1px solid black;
border-top:1px solid gray; border-bottom:1px solid black;
background-color:gold; }
.small { width:45px; height:auto; font-weight:bold;}
.boxfont{font-weight:bold; font-size:16px; margin-left:15px;}
</style>
</head>
<body>
<div class="mybox small">
box 1
<div class="boxfont">box1 label</div>
</div>
<div class="mybox small">box 2</div>
<div class="mybox small">box 3</div>
</body>
</html>
Why do i get scroll bars on the first box in IE7 and NOT in any other browser?