More on the root element and the initial containing block - vertical margin collapsing

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Stanimir Stamenkov
    #1

    More on the root element and the initial containing block - vertical margin collapsing

    I'm trying to clear some sizing issues relative to the initial
    containing block and the root document element. The sample document I'm
    trying with:

    http://stanio.info/viewport_fill.html


    Basically, for some tests I want to specify the height of an example
    DIV element inside the BODY using percentages of the viewport height.
    For this to work the BODY container should fill the viewport height
    where I'm using:

    html, body { height: 100% }

    I've set the margins and padding of the HTML and BODY elements to 0
    (zero) so the content height would be equal to the boxes height.

    Now, the example DIV element has top and bottom margins of 3em and
    'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
    and Opera 8.02 is the appearance of a vertical scroll-bar for the
    viewport adding about 3em of height to scroll. IE 6 doesn't show a
    scroll-bar.

    Further I've removed (set to zero) the top margin of the example DIV
    element and the scroll-bar has disappeared in Mozilla but there is
    still about 3em to scroll in Opera. Additionally removing the bottom
    margin removes the scroll from Opera, too.

    This seems to be a vertical margin collapsing issue since adding a
    border to the BODY or HTML element causes the additional scroll height
    to be as much as the top and bottom border heights. Probably Opera
    doesn't get it right at all given the two possible cases I'll describe.

    1. AFAIK that's not really specified but I expect the viewport to
    establish an implicit border where the margin of the root element
    doesn't collapse with anything "upstairs" so that's why I think IE 6 in
    this case is correct.

    2. Mozilla seems to collapse the top margin of the example DIV with the
    no margin of the parent BODY and HTML elements but it adds that margin
    to the void extending the initial containing block height.

    Opera is inconsistent because it adds the bottom margin to the void
    even if it doesn't reaches the edges of the parent BODY and HTML
    margin. Further it adds only the top or bottom margin height -
    whichever is greater.

    What do you think is the correct calculation/rendering?

    --
    Stanimir

    Tags: None
    • Stanimir Stamenkov
      #2
      Re: More on the root element and the initial containing block - vertical margin collapsing

      [x-posting to n.p.mozilla.lay out, followup-to n.p.mozilla.lay out]

      /Stanimir Stamenkov/:
      [color=blue]
      > http://stanio.info/viewport_fill.html
      >
      > Now, the example DIV element has top and bottom margins of 3em and
      > 'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
      > and Opera 8.02 is the appearance of a vertical scroll-bar for the
      > viewport adding about 3em of height to scroll. IE 6 doesn't show a
      > scroll-bar.
      >
      > 1. AFAIK that's not really specified but I expect the viewport to
      > establish an implicit border where the margin of the root element
      > doesn't collapse with anything "upstairs" so that's why I think IE 6 in
      > this case is correct.
      >
      > 2. Mozilla seems to collapse the top margin of the example DIV with the
      > no margin of the parent BODY and HTML elements but it adds that margin
      > to the void extending the initial containing block height.
      >
      > What do you think is the correct calculation/rendering?[/color]

      --
      Stanimir

        Comment

        • Stanimir Stamenkov
          #3
          Re: More on the root element and the initial containing block - vertical margin collapsing

          [x-posting to c.i.w.a.stylesh eets, followup-to c.i.w.a.stylesh eets]

          /Stanimir Stamenkov/:
          [color=blue]
          > http://stanio.info/viewport_fill.html
          >
          > Now, the example DIV element has top and bottom margins of 3em and
          > 'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
          > and Opera 8.02 is the appearance of a vertical scroll-bar for the
          > viewport adding about 3em of height to scroll. IE 6 doesn't show a
          > scroll-bar.[/color]

          I think I've got it. I've made another sample:

          http://stanio.info/viewport_fill2.html


          So, the DIV element is collapsing margin with the BODY element (as seen
          by differntly colored backgrounds) were the extra height comes from.
          Turns out Internet Explorer to be incorrect(?) in this case, acting
          somewhat between the initial CSS 2 recommendation and the latest CSS
          2.1 revision. Opera still gives that strange bottom margin when the
          root (HTML) element doesn't have a border:

          http://stanio.info/viewport_fill_opera1.html

          http://stanio.info/viewport_fill_opera2.html


          A somewhat consistent behavior is achieved setting 'overflow: auto' on
          both HTML and BODY elements:

          http://stanio.info/viewport_fill3.html


          In this case I'm not really sure how the "margin collapsing" is
          supposed to work (between the element with 'overflow: auto' and the
          child element which margin overflows) and Opera is far different than
          Moz or IE, again:

          http://stanio.info/viewport_fill4.html


          --
          Stanimir

            Comment

            Previous template Next
            Working...