IE7 Scrollbar doesn't work

Question

I am fixing bugs for IE7 and this one has me stumped. The content in this page is larger than its containing div. IE7 is properly displaying a vertical scroll bar but the content is getting on top of the vertical scroll bar and when the user clicks the scroll button the content doesn't move. I can't imagine what is causing this. Any Ideas?

EDIT: I Have attached a screenshot of the problem: alt text http://img31.imageshack.us/img31/605/picture5kw.png

Solution 1

I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:

#content_box  {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;

this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).

I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)

Solution 2

IE7 scroll issue

Apply position: relative to container having the property overflow-y:auto;

e.g.

#content_box{
    position: relative;
    overflow-y:auto;
}

Above solution works for me.

Solution 3

Is it possible to set the width of .grey_box to hard-coded 510px? Because it looks like IE7 is the only one who gets this right, since #content_box is set to 530px with 10px padding, which would make all boxes inside 520px wide, and that is somewhere out into the scrollbar. Pekka might be into something as well, with IE7 and IE6 not implementing overflows correctly.