I have some floated divs in a containing div. The containing div is extended to edge of window in Safari 1 and 2 and Opera 7 PC (no other opera versions tested). So I either 1) have done something really wrong or 2) need to hide some rules from safari. Any suggestions?
Here is the page on the web. In safari, be sure to resize the browser smaller because I applied a max-width “fix” when 2 columns are shown.
here is a 6MB screenshot
and the code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
@media all {
@import url(not-seen-by-safari.css);
}
</style>
<style>
.outer, .home_featuredfonts {
background: #F3F7FB;
padding: 10px 8px 10px 10px;
border: 1px solid red;
float: left;
/* force width to get 2 clean cols */
max-width: 782px;
}
.inner, .outerborder2 {
margin-right: 5px;
border: 2px solid #F3F7FB;
float: left;
}
.block, .homefont {
width: 360px;
height: 50px;
padding: 10px;
background: #FFFFFF;
float: left;
border: 1px solid #B3C9DE;
}
.clr {
clear: both;
}
</style>
<title>test.html</title>
</head>
<body>
<h1>safari browser bug?</h1>
<p>Blue background of enclosing div fills to edge in safari 1 and 2 and Opera 7 (PC). Looks fine in firefox, IE6, IE5/mac.</p>
<div class="outer">
<div class="inner">
<div class="block"><img src="images/stub.png" border="0" width="345" height="50" alt="image goes here"></div>
</div>
<div class="inner">
<div class="block"><img src="images/stub.png" border="0" width="345" height="50" alt="image goes here"></div>
</div>
<div class="inner">
<div class="block"><img src="images/stub.png" border="0" width="345" height="50" alt="image goes here"></div>
</div>
<div class="inner">
<div class="block"><img src="images/stub.png" border="0" width="345" height="50" alt="image goes here"></div>
</div>
</div>
</body>
</html>