FSS clearfix

Justin Obara obara.justin at gmail.com
Thu Mar 17 18:49:51 UTC 2011


Here's an update on the current progress of our clearfix investigation.

Yesterday Heidi and I sat down and spent some time looking at the clearfix options. One thing we noticed is that what I had labelled as the the New Clearfix was actually an old one. Oops. I've updated my github repo with the actual New Clearfix, and kept the old one in as the Old Clearfix. I haven't gotten around to doing all the cross browser testing yet. 

Heidi and I will probably spend some more time looking into the various options and maybe making some more adjustments to the test page.

At the dev meeting yesterday we also talked a bit about the various clearfix options. The one thing to note is that none of the solutions is perfect. The current leaning is towards keeping fl-fix as is and providing a second clearfix option, which will be the best of the rest that we try.

Let me know what you think.

Thanks
Justin

On 2011-03-14, at 1:52 PM, Justin Obara wrote:

> 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
> 
> <inline-block.png><fl-fix.png><clearfix.png><no-fix.png><ie6 fl-fix.png>
> 
> 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/20110317/bdbae912/attachment.html>


More information about the fluid-work mailing list