Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
Hello again, Well I now have the gallery being displayed correctly in FF3 and Safari by delivering the appropriate code changes. Thank you for your help on this issue, I'm very impressed that you found a solution. The thing that's still grating on me is that I just don't understand what's going on. What are all the empty divs about? Tim On 6/12/08, Bruno Fassino <[EMAIL PROTECTED]> wrote: > On Wed, Jun 11, 2008 at 3:01 PM, Timothy Armes wrote: > > > > Is there no one that can help me on this issue? > > > > > > I'm struggling with a Safari float shrinking problem and I'm > > > desperately seeking a solution. I've spent days on the issue now. > > > > > > > http://www.timothyarmes.com/gallery.php?lang=en-gb&sec=personal > > > > > > In your page the "shrinking" container has two roles: > - maintaining a sort of fluid centering of the images > - providing the white border around them > > I really believe the best way is to simplify and abandon the above > requirements (like in David's example.) > > Anyway I played a little, and in Safari and Firefox 3 one can > probably get those effects using inline-blocks... See this > http://brunildo.org/test/test/armesgallery.html I copied your html, > added some styles and some divs (all the rest: CSS, images, ...) is > still from your site. This seems to "cure" Safari 3.1 and Firefox 3. > But breaks Fx2 (no support for inline-blocks) and IE: adjusting the > latter is possible, but for the former is going to be complicated. And > the result is going to be too fragile... The idea to "fake" a sort > extra-shrinking container is demonstrated here [1]. > So, unless someone has a better idea, I would say again that's better > to go for something simpler. > > Best regards, > Bruno > > [1] http://brunildo.org/test/test/shrinkwrap7.html > > -- > > Bruno Fassino http://www.brunildo.org/test > -- http://www.timothyarmes.com __ 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/
Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
Hi Bruno, Thank you for your help, it's greatly appreciated. I'm currently on a computer with FF2 or IE so i can't see the solution at work, but I'll take a look at home later. Please leave your solution up! I've looked at your faked example but I don't understand how it works at all. It is technique explained anywhere or did you create it yourself? It looks like my best bet, if I wish to keep my layout, is to feed your solution to FF3/safari via server side sniffing and resort to the current solution in all other cases. Tim On Thu, Jun 12, 2008 at 4:39 PM, Bruno Fassino <[EMAIL PROTECTED]> wrote: > On Wed, Jun 11, 2008 at 3:01 PM, Timothy Armes wrote: >> >> Is there no one that can help me on this issue? >> >> > I'm struggling with a Safari float shrinking problem and I'm >> > desperately seeking a solution. I've spent days on the issue now. >> > >> > http://www.timothyarmes.com/gallery.php?lang=en-gb&sec=personal >> > > > In your page the "shrinking" container has two roles: > - maintaining a sort of fluid centering of the images > - providing the white border around them > > I really believe the best way is to simplify and abandon the above > requirements (like in David's example.) > > Anyway I played a little, and in Safari and Firefox 3 one can > probably get those effects using inline-blocks... See this > http://brunildo.org/test/test/armesgallery.html I copied your html, > added some styles and some divs (all the rest: CSS, images, ...) is > still from your site. This seems to "cure" Safari 3.1 and Firefox 3. > But breaks Fx2 (no support for inline-blocks) and IE: adjusting the > latter is possible, but for the former is going to be complicated. And > the result is going to be too fragile... The idea to "fake" a sort > extra-shrinking container is demonstrated here [1]. > So, unless someone has a better idea, I would say again that's better > to go for something simpler. > > Best regards, > Bruno > > [1] http://brunildo.org/test/test/shrinkwrap7.html > -- > Bruno Fassino http://www.brunildo.org/test > -- http://www.timothyarmes.com __ 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/
Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
Is there no one that can help me on this issue?
On Tue, Jun 10, 2008 at 10:02 AM, Timothy Armes <[EMAIL PROTECTED]> wrote:
> 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:
>
>
>
>
> #a { float: left; background-color: red; }
> .b { float: left;
> display: block;
> width: 300px;
> height: 300px;
> background-color: green;
> border: white solid 2px;
>}
>
>
>
>
>
>
>
>
>
>
>
> 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/
Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
Hi Bill, > To add to what Bruno has already put forward, you might also consider > taking another look at your code. It's incredibly difficult to fix a CSS > problem with invalid code. You've written your code in XHTML > Transitional, which is more for migrating old sites and documents than > for the creation of new ones. It almost implies that you can't be > bothered to follow all the specs, which I know is not the case. It's now XHTML strict. r > > I tested both your website and the simplified code on: > - Firefox 3/Ubuntu Hardy > - Konqueror 4.0.5/Ubuntu Hardy > - Safari 3.1.1/Vista (Hardly) > > The behavior in the test case is not the same as it is on your website - > the float shrinks correctly in the test case for all browsers tested. Odd, because it doesn't behave as I wish under Safari/Mac. Or, apparantly, FF3, and that's really annoying. > I'll have another look at it if you like after you've fixed the > validation errors. Your CSS seems quite complicated for a simple (though > nice) layout, so I'm also not sure what else you've got going on in there. Thanks for your offer. I've now fixed the validation errors. Most of the complexity comes from the fact that I'm trying to center the gallery whilst resting fluid. I'm using the technique of placing the contents in a div positioned at 50% and then using an inner div to shift back buy half its own width. Of course, this is all pointless in safari since the inner div is taking up all the width for the reasons explained by Bruno. Surely there's a solution? 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/
Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
> Once line breaks are determined you would like to have a sort of extra > step to fit the placed contents. This 'extra fit' (not required by the > spec) is done by Opera (and by FF2), and it would indeed be sometimes > desirable, but I don't know how to get it with current CSS. Thanks, I now understand the reason for my problem. If anyone out there has a solution I'd be a very happy man. __ 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/
[css-d] Float doesn't shrink fit content under Safari - any workarounds?
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:
#a { float: left; background-color: red; }
.b { float: left;
display: block;
width: 300px;
height: 300px;
background-color: green;
border: white solid 2px;
}
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/
