3 Microsoft margin collapsing tests (wrt float, clear and clearance)

Hello all,


http://test.csswg.org/source/contributors/microsoft/submitted/Chapter_8/margin-collapse-018.xht

a) How come an element on which clear is set (to other than none) can
have an effect when there is no preceding floated sibling in the test?

b) The <meta assert> of the test says:

   <meta name="assert" content="An element that has clearance applied to
it will not collapse its top margin with its parent's bottom margin."
/>

Clearance is defined as a vertical spacing created above a margin-top's
element when there is a (preceding) floated element. Clearance (as a
mechanism) does not happen if there is no floated element before (in
code order). That's my understanding and that is also what I read in
section 9.5.2
http://www.w3.org/TR/CSS21/visuren.html#flow-control

Clearance (as a vertical spacing above) is not the same, is not the
equivalent of having the property clear set to left or right or both.
"Clearance" and "has clear set" are not interchangeable expressions.

c) which of the following stylesheet is easier for you to understand?

       <div id="div1">
            <div class="class1"></div>
            <div id="test">
                <div id="test1"></div>

            </div>
            <div class="class1"></div>
        </div>

or

       <div id="containing-block">
            <div class="ordinary-sibling"></div>
            <div id="parent-with-margin-bottom">
                <div id="clear-both"></div>
            </div>
            <div class="ordinary-sibling"></div>
        </div>

Which of the examples are better suited for people to review, to examine?

My conclusion is that margin-collapse-018.xht should be rejected or redone.

-------------------------

http://test.csswg.org/source/contributors/microsoft/submitted/Chapter_8/margin-collapse-023.xht

The <meta assert says: "If a block-level sibling has clearance then the
bottom margin of its previous sibling will not be adjoining its top
margin.">


a) Again, "has clearance" is undifferentiated from "has clear set (to
other than none)".

b) The two inner divs are both floated, so their margins are never
supposed to collapse anyway, to begin with.

div div
            {
                background: green;
                float: left;
                height: 1em;
            }

"Vertical margins between a floated box and any other box do not
collapse (not even between a float and its in-flow children)."
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

So,            #div3
            {
                clear: both;
            }

with its clear: both is never actually involved or tested in that test.

c) As a replacement for such test, I propose a variation of this test, a
static and adjusted variation of this test:

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/CSS21-negative-clearance-example.html

--------------------

http://test.csswg.org/source/contributors/microsoft/submitted/Chapter_8/margin-collapse-027.xht

<meta assert says: "Top margins collapse to siblings and bottom margin do
not collapse when own margins collapse and clearance is applied."

a) This sentence is utterly difficult to understand and seems awkwardly
written.

b) The test has an element on which clear is set but there is no float
anywhere in the test. So, how could there be a clearance created?

c) The markup is

        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
                <div id="div4"></div>
            </div>
            <div id="div5"></div>
        </div>

Again, what would be best for CSS newbies, ordinary web authors wishing
to see/examine examples of margin collapsing for learning purposes. I
suggest more intuitive, meaningful id semantic.

        <div id="containing-block">
            <div id="div2">
                <div id="div3"></div>
                <div id="clear-both"></div>
            </div>
            <div id="ordinary-sibling"></div>
        </div>


---------------

Finally the CSS 2.1 uses the term "subsequent siblings" (1) while not
defining such term anywhere in CSS 2.1 spec. It does define the term
"following sibling" though. It should even provide a short markup
structure illustrating this.

I also think CSS 2.1 should introduce, define and use the term "adjacent
sibling". And again provide a short markup structure illustrating this.

(1):
"
When an element's own margins collapse, and that element has had
clearance applied to it, its top margin collapses with the adjoining
margins of subsequent siblings but that resulting margin does not
collapse with the bottom margin of the parent block.
"
http://www.w3.org/TR/CSS21/box.html#collapsing-margins


regards, Gérard Talbot

Received on Wednesday, 20 January 2010 21:56:54 UTC