Question

Per the jsfildde below, I have a table inside a div(#body) that scrolls along the y-axis. My problem is that in IE, the scrollbar hides part of the last table cell behind it, subsequently shifting the layout of the table columns. There is no such problem in Chome and I must support both browsers. I believe that the problem is with IE and that Chrome is rendering the CSS properly. How can I make IE display my columns in the same way as Chrome?

If the fiddle is viewed in both browsers, the difference will be seen in that the table header does not line up with the corresponding columns.

http://jsfiddle.net/5DD5b/3/

Thanks for any suggestions given.

EDIT: It works in IE9, but not in 7 which needs supported.

Answer 1

Since this problem only seems to occur in IE7, I decided to detect the userAgent per ihake’s suggestion and proceed accordingly. It’s not ideal, but it works.

var IE7 = false;

$(document).ready(function(){

    if($.browser.msie) {
        var userAgent = $.browser.version;
        if(userAgent.substring(0,userAgent.indexOf('.')) == 7) IE7 = true;
    }

    ...

Farther down in the file I set the css one way if IE7 is true and another way if it is false. Pretty simple.