Six Studios overflow: hidden + position: relative doesn't work in IE 6/7

overflow: hidden + position: relative doesn't work in IE 6/7

I hit an IE 6/7 bug today. My HTML was as follows:

<div id="container">
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    ...
  </ul>
</div>

My CSS was as follows:

div#container {
  overflow: hidden;
  height: 400px;
}

div#container ul {
  position: relative;
}

The list content would display and flow outside of the container.

Setting the UL to position: relative causes the bug in Internet Explorer 6 and 7.

Moments after finding the source of the problem I was pointed to this article by a friend:

In the article the writer isn’t aware if the bug exists in Internet Explorer 7. Yes it does.

Posted by dane Filed in XHTML/CSS