Re: Issue 101 Resolution

Tab Atkins Jr. wrote:
> This email is an attempt to resolve Issue 101
> (http://wiki.csswg.org/spec/css2.1#issue-101), brought up by dbaron's
> email last year
> (http://lists.w3.org/Archives/Public/www-style/2009Jan/0445.html) and
> exemplified by his testcases
> (http://dbaron.org/css/test/2009/float-outside-tests/).
> 
> Summary of the issue
> ====================
> 
> The positions of floats are defined by a set of constraints defined in
> CSS2.1, section 9.5.1
> (http://www.w3.org/TR/CSS21/visuren.html#float-position).  These
> constraints are defined to involve all the floats in the same BFC.  In
> practice, however, all browsers ignore some floats in the BFC in
> certain circumstances when satisfying rules 3 and 7, and IE7 similarly
> ignores some floats in the BFC in certain circumstances when
> satisfying rule 5.
> 
> Browsers appear to interoperate in their breaking of rules 3 and 7, so
> my proposal below will alter the text to accomodate their quirks, as
> it seems likely that web content has come to rely on these quirks (in
> particular, they appear to involve behavior that would be exercised in
> float-based layouts, which means changing them would create decent
> breakage.


The test cases for rule three (left and right) happen since the 
browsers are honoring computed negative margin values. Normally a 
designer would avoid this since it causes inline content to render 
above floats and not be displaced by them. Take this test case.


<http://css-class.com/test/css/viseffects/overflow4.htm>


The computed values are.

  width: 500px;
  height: 150px;
  margin-right: -200px;


Thus declaring a negative margin of greater value allows for this.


http://css-class.com/test/css/viseffects/overflow5.htm


Need to review other test that you had.


[snip]
> Suggested Change
> ================
> 
> Current text:
> 
> # The right outer edge of a left-floating box may not
> # be to the right of the left outer edge of any
> # right-floating box that is to the right of it.
> # Analogous rules hold for right-floating elements.
> 
> Suggested text:
> 
> | The right outer edge of a left-floating box may not
> | be to the right of the left outer edge of any
> | right-floating box that is to the right of it and
> | that intersects the left-floating box's parent box.
> | Analogous rules hold for right-floating elements.


The below test removes the unambiguity of any parents elements. The 
right float does not drop until the viewport is narrower than 200px.


<!DOCTYPE html>

<div 
style="float:left;margin-right:-100px;width:200px;background:lime;">FL</div>
<div 
style="float:right;margin-left:-100px;width:200px;background:red;">FR</div>


So this would lead to making outer edge margin edge. Suggested text:


   | The right margin edge of a left-floating box may not
   | be to the right of the left margin edge of any
   | right-floating box that is to the right of it. The
   | computed margin edge for either floats may be a negative
   | value. Analogous rules hold for right-floating elements.




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 6 October 2010 01:59:00 UTC