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

Answer 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?)

Answer 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.