Search code examples
htmlcssinternet-explorer-7scrollbarinternet-explorer-6

IE7 Scrollbar doesn't work


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

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