IE7 relative/absolute positioning bug with dynamically modified page content

by

This is related to the “hasLayout bug” of IE. The relatively positioned #panel parent doesn’t have layout and hence IE forgets to redraw its children when it get resized/repositioned.

The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.

#panel { position: relative; overflow: hidden; border: solid 1px black; }

In depth background information about this IE bug can be found in the excellent reference “On having layout” and then for your particular problem specifically the chapter “Relatively positioned elements”:

Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).

The overflow property triggers the element to have layout, see also the chapter “Where Layout Comes From”:

As of IE7, overflow became a layout-trigger.

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. How can I center an absolutely positioned element in a div?
  3. Fixed position but relative to container
  4. Why bottom:0 doesn’t work with position:sticky?
  5. Understanding z-index stacking order
  6. Difference between style = “position:absolute” and style = “position:relative”
  7. Center a position:fixed element
  8. My position: sticky element isn’t sticky when using flexbox
  9. Why does `overflow:hidden` prevent `position:sticky` from working?
  10. Should I use single or double colon notation for pseudo-elements?
  11. If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
  12. IE7 Z-Index issue – Context Menu
  13. What are the default top, left, botton or right values when position:absolute is used?
  14. Set Google Maps Container DIV width and height 100%
  15. position: absolute without setting top/left/bottom/right?
  16. pure CSS multiple stacked position sticky?
  17. box-sizing support in IE7
  18. How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?
  19. IE7, IE8 support for css3 media query [duplicate]
  20. CSS: display:inline-block and positioning:absolute
  21. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  22. Targeting position:sticky elements that are currently in a ‘stuck’ state
  23. What disadvantages are there to the tag?
  24. Absolute positioning ignoring padding of parent
  25. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  26. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  27. position relative in firefox [duplicate]
  28. Have a fixed position div that needs to scroll if content overflows
  29. How to fix Internet explorer 7 bug when using percentage widths for layout?
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment