3

Consider the following HTML:

<div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper">
    <div id = "selections-inner-wrapper" style = "position: relative">
        <ul style = "text-align:left; width: 12em;">
             <!---- LOTS OF LI ELEMENTS GO HERE ---->
        </ul>
    </div>
</div>

My intention here is that anything within the outermost DIV should be hidden (clipped) if it extends beyond 5em in height. (That is the purpose of the overflow: hidden style attribute.) When I render this HTML using Firefox or any Webkit-based browser, the inner content is correctly clipped.

jsfiddle link: http://jsfiddle.net/Q82N9/

Screenshot with Firefox:

enter image description here

However, with IE-7 it doesn't work correctly. (surprise, surprise) For some reason, the inner UL element is not clipped, despite the overflow: hidden property.

Screenshot with IE-7:

enter image description here

It seems the problem is the position: relative styling attribute in the inner-DIV. If I remove that style attribute, it works fine on IE-7. However, I need the inner-DIV to have a relative position, because certain Javascript code that I'm working with assumes it does in order to scroll it up and down.

Question: So, is there some reason this isn't working on IE-7? Is this a well-known problem with a workaround? Or is IE-7 actually doing the right thing and for some reason relatively positioned nodes can't be hidden using the overflow property.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Channel72
  • 24,139
  • 32
  • 108
  • 180
  • have you tried setting `position` on the parent as well? – PlantTheIdea May 15 '13 at 19:50
  • That's not a screenshot of IE7. (That said, this does actually happen on IE7.) – BoltClock May 15 '13 at 19:51
  • Wait... you're right, I'm sorry that's IE-6 – Channel72 May 15 '13 at 19:52
  • 2
    Is [this](http://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo) similar to the issue you've described? – BoltClock May 15 '13 at 19:54
  • it's a very old known bug in ie6 as well as ie7 - http://snook.ca/archives/html_and_css/position_relative_overflow_ie, http://www.epigroove.com/blog/how-to-fix-ie-6-and-overflow-hidden – Jawad May 15 '13 at 19:55
  • http://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo – Jawad May 15 '13 at 19:57
  • POINT # 5 - http://stylisticweb.com/design-tutorials/15-ie6-bugs-and-simple-solutions – Jawad May 15 '13 at 19:58

1 Answers1

2

Add position:relative to container with the overflow declaration, and problem should be solved.

Timidfriendly
  • 3,224
  • 4
  • 27
  • 36