I 've been working on this layout that had a relatively positioned element inside a container with overflow. everything looked good until I switched to IE7 and noticed that my positioned element remained fixed. here's some code to demonstrate the problem:
1 <Div id = "Container">
2 <Div id = "A"> </div>
3 <Div id = "B"> </div>
4 </div>
And the related CSS:
1 # container {
2 height: 100px;
3 border: 1px solid blue;
4 overflow: auto;
5}
6 # {
7 Height: 200px;
8 Background-color: lightblue;
9 float: left;
10 width: 60px;
11}
12 # B {
13 Position: relative;
14 Height: 200px;
15 background-color: pink;
16 width: 60x;
17}
The key thing to notice in this CSS is the overflow set to the container, and the positioning set to Element B. Here's a screenshot to demonstrate:
This overflow bug is already ented well and exists in IE6 as well. To solve this, I added position: relative to the container. This seems to work for both IE6 and 7.
Turn: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
