Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
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-gbsec=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 __ 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-gbsec=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?
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-gbsec=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?
Timothy Armes wrote: 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? http://www.timothyarmes.com/gallery.php?lang=en-gbsec=personal You are welcome! The empty divs are the same number (8) of your albumBox divs, and being inline-blocks can be centered without using your technique with relative, -50%, ... which requires a shrink-wrapping container. The first empty div is used as an anchor to start the positioning of your divs which are stacked above the empty ones. Moreover the empty divs are bigger of yours and partially overlapping to provide the white background needed to simulate the presence of a white shrink-wrapping container which is not really there. Don't know if this clarifies things a bit... I guess that you implemented the server-side switch for Safari since I get the modified page in it (not with the Fx3 beta nightly build I'm using.) As I told you, I consider the whole thing a bit fragile, but well, it's surely interesting :-) Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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:
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-gbsec=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?
Timothy Armes wrote: Is there no one that can help me on this issue? http://www.timothyarmes.com/gallery.php?lang=en-gbsec=personal Tim Not from this end at least... http://www.chelseacreekstudio.com/ca/cssd/tl.html -- http://chelseacreekstudio.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?
On Tue, Jun 10, 2008 at 10:02 AM, Timothy Armes wrote: 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. [...] 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-gbsec=personal On the above page, what you see in Safari occurs in Firefox 3 beta as well. And I believe it is not wrong according to the definition of the shrink-to-fit algorithm in the spec [1]. When the preferred width (no inserted line breaks) cannot be used because it is greater than the available width, then the width jumps to the latter. In other words, roughly speaking, the spec says: fit the content if you don't need to break it, but as soon as you need to break some lines then use all the available width. 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. Bruno [1] http://www.w3.org/TR/CSS21/visudet.html#float-width -- Bruno Fassino http://www.brunildo.org/test __ 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/
Re: [css-d] Float doesn't shrink fit content under Safari - any workarounds?
Timothy Armes wrote: 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. Hi Timothy -- 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. The W3C Validator returns 104 errors [1] for your XHTML source code (many of which are probably solved by properly closing a few tags here and there) and the W3C Jigsaw Validator [2] (for CSS) returns 11 errors. While it doesn't appear that this would fix your problem since you've included a simpler test case, it'll save you a lot of headaches later on. 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. 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. Hope it helps! Bill Brown TheHolierGrail.com [1]: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.timothyarmes.com%2Fgallery.php%3Flang%3Den-gb%26sec%3Dpersonal [2]: http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.timothyarmes.com%2Fgallery.php%3Flang%3Den-gb%26sec%3Dpersonal __ 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/
