Overflow/Margin Treatment with Nested PIE elements #14

Closed
gordonbrander opened this Issue Jun 1, 2010 · 6 comments

Comments

Projects
None yet
2 participants

The situation

A block-level element with overflow:hidden contains a block-level child with margin. Both elements have PIE behavior attached.

Expected behavior

Because of the overflow setting, the margin should not collapse, but should space the child box away from the parent box.

Actual behavior

  • In cases where PIE is attached only to the inner, top margin collapses and background disappears.
  • In cases where PIE is attached to both the inner and the outer, the top margin collapses.
  • If PIE is only attached to the outer, margin is respected.

Test: http://gordonbrander.com/lab/pie/margin-test/

Owner

lojjic commented Jun 1, 2010

Thanks for the very thorough testcase. I will look into these issues. I have a feeling they're due to IE bugs with margin handling on elements with hasLayout, rather than something PIE-specific, but I'll double check and see if there's a workaround.

I also noticed your testcase demonstrates an additional problem with positioning of the CSS3 elements not getting updated -- you can see it by resizing the browser window width so that text starts wrapping. The backgrounds stay in place. I'll look into this too.

The problem in the second testcase with the disappearing background is a common problem with position:static ancestors; there is a detailed writeup of this in http://github.com/lojjic/PIE/blob/master/documentation/issues.html (the section titled "Problems with z-index"). Giving position:relative to either the parent or child makes it show up. If you have any brilliant ideas how to get around this issue without forcing relative positioning please let me know or start a discussion on the dev mailing list.

Owner

lojjic commented Jun 2, 2010

The margin-collapsing bug does not occur in IE8 standards mode.

Owner

lojjic commented Jun 2, 2010

Gordon, I have removed the code that was forcing hasLayout on the element (via zoom:1) -- I had been under the impression that this was required to make onresize and onmove events fire, but it appears this may not be the case. All my test documents appear to still work just fine without it, and removing hasLayout makes the margin collapsing work properly.

IE6 still doesn't work correctly (none of the inner elements have margins on top or bottom) but this happens whether PIE is applied or not.

Can you give the new code a try and if all is good then you can close this ticket. Thanks!

Owner

lojjic commented Jun 2, 2010

Hmm, scratch that. Turns out removing hasLayout did break the onmove/onresize events. I just wasn't seeing it because there's also an onresize listener on the window, which was obviously firing when I would resize the window. This won't handle resizes or position changes due to e.g. previous sibling height changes.

I'll have to back this out and hopefully come up with something else. Or maybe there's a smarter way to determine when to apply zoom:1 and when not to.

I thought it might be a hasLayout issue. Can't be helped, but can be worked around easily enough. Thanks!

I filed a separate bug (with test case) for your report on PIE element positions not updating after window resize (#15).

Closing, since it's IE's, rather than PIE's fault.

@gucong3000 gucong3000 pushed a commit to gucong3000/PIE that referenced this issue Apr 22, 2016

Jason Johnston Stop forcing hasLayout on the target element; it seems that this is n…
…ot required to make onmove/onresize events fire after all. Tests still appear to function properly. Fixes the margin collapsing issue described in issue #14.
182fcb0

@gucong3000 gucong3000 pushed a commit to gucong3000/PIE that referenced this issue Apr 22, 2016

Jason Johnston Add test case for issue #14 courtesy of Gordon Brander. 08dbcc8

@gucong3000 gucong3000 pushed a commit to gucong3000/PIE that referenced this issue Apr 22, 2016

Jason Johnston Revert "Stop forcing hasLayout on the target element; it seems that t…
…his is not required to make onmove/onresize events fire after all. Tests still appear to function properly. Fixes the margin collapsing issue described in issue #14."

Turns out hasLayout is indeed required in order for onmove and onresize events to fire. My tests were faulty because the window's onresize handler was firing.

This reverts commit 182fcb0.
559c451

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment