Hi,
I'm struggling with a Safari float shrinking problem and I'm
desperately seeking a solution. I've spent days on the issue now.
I have a floated container containing floated fixed sized divs. On FF
the container shrinks to fit the contents, as is correct for a
widthless float. In Safari however the container isn't shrinking, it's
taking up 100% of the available width.
Here's some minimal code that displays the problem:
<html>
<head>
<style>
#a { float: left; background-color: red; }
.b { float: left;
display: block;
width: 300px;
height: 300px;
background-color: green;
border: white solid 2px;
}
</style>
</head>
<body>
<div id="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
</body>
</html>
When the window is wide enough to display the 3 blocks the behaviour
is as expected and the container shrink wraps the floats. However,
when the window is made narrower we see that the container takes up
the full width of the window when it should still be shrinking to fit
the contents, as it does on FF.
You can also see the bug in action here:
http://www.timothyarmes.com/gallery.php?lang=en-gb&sec=personal
It's slightly more complicated than the minimal version above, but the
problem is the same. In this case the floated outer container is
centered on the page and there should be a white border around the
images. In the case of Safari, as in my test code, my outer container
takes up the available width. This has two side effects:
1) The images aren't centered (because the container is too wide)
2) My border is far too wide on the right hand side.
Any help with this issue would be greatly appreciated,
Tim
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
