Updates to FSS

Justin Obara obara.justin at gmail.com
Mon Mar 14 17:52:34 UTC 2011


I've made some more updates to the test page I've been working with for FLUID-4023. Heidi had found an issue when trying to use one of the clearfix solutions on the IDRC sight, and she had another possible solution as well. These have now been captured in the tests page, and I've updated the table of results below.

I've also included images that show some of the various issues that are run into with the different browsers.

Thanks
Justin



Win Xp
Win 7
Mac OS  10.6
Chrome
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared, pushes out the right side a bit


Firefox 4

none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared
Firefox 3.6
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared
IE 9

none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared, pushes out the right side a bit

IE 8
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared, pushes out the right side a bit
none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared, pushes out the right side a bit

IE 7
none: everything cleared to far
fl-fix: everything cleared to far
jquery: everything cleared to far
new clearfix: everything cleared to far
inline-block: everything cleared to far


IE 6
none: everything cleared to far
fl-fix: everything cleared to far
jquery: everything cleared to far
new clearfix: everything cleared to far
inline-block: everything cleared to far


Safari 5


none: not contained
fl-fix: cleared w/ scroll bars
jquery: cleared too far
new clearfix: cleared too far
inline-block: cleared, pushes out the right side a bit



On 2011-03-10, at 3:31 PM, Justin Obara wrote:

> Here are my findings so far based on the sample test page that I made.
> 
> - Justin
> 
> 
> 
> Win Xp
> Win 7
> Mac OS  10.6
> Chrome
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> 
> Firefox 4
> 
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> Firefox 3.6
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> IE 9
> 
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> IE 8
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> IE 7
> none: cleared
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> 
> IE 6
> none: cleared
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> 
> Safari 5
> 
> 
> none: not contained
> fl-fix: cleared w/ scroll bars
> jquery: cleared
> new clearfix: cleared
> 
> On 2011-03-08, at 10:21 AM, Justin Obara wrote:
> 
>> Hi Gary, 
>> 
>> I've been looking into fl-fix as part of http://issues.fluidproject.org/browse/FLUID-4023 . Could explain a bit more about what the bugginess is exactly and how to reproduce some of the issues. I'm trying to setup a test instance that we can use to evaluate the various options.
>> 
>> Thanks
>> Justin
>> 
>> On 2011-02-18, at 5:37 PM, Gary Thompson wrote:
>> 
>>> 3. The FSS "fl-fix" declaration is not a complete box model fix. Across a lot of implementations, it has been buggy and required using other solutions. The suggested fix is to use jQuery UI's .ui-helper-clearfix instead (drop fl-fix from FSS entirely) or update fl-fix to whatever .ui-helper-clearfix is using to produce predictable, cross-browser results.
>> 
> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: inline-block.png
Type: image/png
Size: 101133 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: fl-fix.png
Type: image/png
Size: 120069 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: clearfix.png
Type: image/png
Size: 127146 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: no-fix.png
Type: image/png
Size: 114698 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ie6 fl-fix.png
Type: image/png
Size: 27320 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20110314/4aec5568/attachment-0004.png>


More information about the fluid-work mailing list