jazz_snob
05-18-2006, 04:34 AM
I have some floated divs inside a container div. The container div has a blue background. In safari (and Opera 7 PC) the container div extend too far --- fills browser window. Firefox, IE5/mac and IE6 all correctly display outer div "hugging" the containing divs.
I haven't found any way to hide CSS from _just_ safari. If you know of either a way to hide CSS that works, or can tell me what I'm doing wrong I'd greatly appreciate it. :)
see code below or this sample (http://phpfunk.com/safari.html)
Here is a screen shot (warning 6MB)
http://phpfunk.com/safari-screenshot.jpg
<!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>
I haven't found any way to hide CSS from _just_ safari. If you know of either a way to hide CSS that works, or can tell me what I'm doing wrong I'd greatly appreciate it. :)
see code below or this sample (http://phpfunk.com/safari.html)
Here is a screen shot (warning 6MB)
http://phpfunk.com/safari-screenshot.jpg
<!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>