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
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 div
container 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?)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With