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