Scrollbar in a div shows different behaviour in IE7 from IE8

Question

In a Web page I'm using a div which contains a table inside it. I have made overflow property of this div to be auto. When a vertical scroll bar appears different behaviours are being shown by IE7 and IE8.

In IE7 scollbar does not use div's width, but in IE8 scrollbar uses some width of div. Due to this, when I assign width of the table to be some percentage of div's width, table's width is set to different values in IE7 and IE8.

Due to this right side of my table seems more distant to scrollbar in IE7 than in IE8. I want the page to look the same in both browsers.

Is there a way to do this?

Regards, Abhishek Jain

Answer 1

I was also faced the same problem i my current project. Use of browser specific scripting( I used jQuery) can solve the problem: eg

 var ieversion;
 if (jQuery.browser.msie) {
        ieversion = (parseInt(jQuery.browser.version));
    }
if (ieversion == 6 || ieversion == 7) // IE7 Bug Fixes
    {
   //Codes to fix IE7 bug
   //e.g. var divwidth=$("#idofDIV").width();//Dynamically getting the width if DIV
   //$("#idofTable").css({'width':divwidth+'px'});//Dynamically setting the width if Table

    }