Re: Issue 101 Resolution

Tab Atkins Jr. wrote:
[snip]
> I don't understand what you mean.  Take the first broken testcase for rule 3:
> 
> <!doctype html>
> <div id=container>
>  <div id=rightfloat></div>
>  <div id=leftparent>
>    <div id=leftfloat></div>
>  </div>
> </div>
> <style>
> #container {
>  width: 600px;
>  height: 400px;
>  background: yellow;
> }
> #rightfloat {
>  width: 200px;
>  height: 100px;
>  background: green;
>  float: right;
> }
> #leftfloat {
>  width: 450px;
>  height: 100px;
>  background: blue;
>  float: left;
> }
> #leftparent {
>  width: 390px;
>  height: 250px;
>  border: 3px dotted black;
> }
> </style>
> 
> "getComputedStyle(document.getElementById('leftfloat')).marginRight"
> return "0px", exactly as it should.  The computed value of the right
> margin is definitely not negative.  (Neither is the left margin, for
> that matter.)
[snip]

Sorry Tab, I got it all wrong. So in Gecko, WebKit and Opera, the 
outer left edge of div#rightfloat is only responding to the outer 
right edge of the sibling and parent div#leftparent and since 
div#leftfloat is larger than it's parent, it (overflows) layers above 
div#rightfloat. If div#leftparent doesn't have a width or its' width 
is equal to div#leftfloat, there is no overflow.

In IE8 and IE9 beta, rule 3 is followed.

If we had the below, Gecko and Opera shows the div#leftfloat layering 
over div#rightfloat. WebKit shows the reverse (div#rightfloat highest) 
and IE8 and IE9 beta shows the layout very different due to a line box.


<!doctype html>
<div id=wrapper>
  <div id=rightfloat></div>
  <div id=container>
   <div id=leftparent>
    <div id=leftfloat>According to CSS 2.1, the top of this float 
should be just below the bottom of the right float.</div>
    some text
   </div>
  </div>
</div>

  <style>
#wrapper {
  width: 300px;
  height: 400px;
  background: teal;
}
#container {
  width: 200px;
  height: 400px;
  background: yellow;
}
#rightfloat {
  width: 100px;
  height: 100px;
  background: lime;
  float: right;
}
#leftfloat {
  width: 340px;
  height: 240px;
  float: left;
  border: 5px dashed blue;
}
#leftparent {
  width: 200px;
  background: orange;
  border-top: 5px dotted black;
  border-bottom: 5px dotted black;
}
</style>





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

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

Received on Wednesday, 6 October 2010 14:27:11 UTC