column sizes incorrect when scrolling enabled in IE

jkrobbins

I've solved this one but I'm posting this here to maybe save someone else the agony I've gone through for the last two days. I have a page that can display different size tables from different queries, and all were working correct in FF. All except one was correct in IE; the one table that was too wide for the page. In this one, the first column was much wider than the header for that column. I compared FF and IE and found that in FF the header and column width were set to 56px, but in IE the header was 56px and the column was "auto".

I was using sScrollY and sScrollX in the init for datatables and found that if I disabled those options the table would display correctly, but of course that wasn't an acceptable solution. Here's my init code:
[code]
$('#resulttable').dataTable({
'bFilter' : false,
'bSort' : false,
'bServerSide' : true,
'bProcessing': true,
'bAutoWidth' : true,
'sAjaxSource' : '/mfgweb/DataTransferResults',
'bPaginate': false,
'sScrollY': '400px',
'sScrollX': '100%',
'bScrollCollapse': true,
'sDom' : 'Tirt',
'oTableTools' : {
'sSwfPath' : '/mfgweb/common/scripts/swf/copy_cvs_xls.swf',
'aButtons' : ['copy', 'xls', 'print']
},

'fnRowCallback' : function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var rowID = 'row' + iDisplayIndexFull;
$(nRow).attr('id', rowID);
return nRow;
},
'fnServerData' : function(sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData.concat($('.inputfield').serializeArray()),function(json){
fnCallback(json);
});
},
'fnInitComplete' : function() {
//alert('fnInitComplete running');
//$('table.datatable').show();
$('div#resultdiv').show('fast', function(){
oTable.fnAdjustColumnSizing();
});
}
});
[/code]

I finally realized that I was dealing with a CSS problem and traced the issue to a global css file that is automatically added to all our web pages. The problem child was this entry:
[code]
font: 76% Helvetica, Arial, sans-serif;
[/code]

I can't change the global file, but I have a local file that is loaded last, so I over-rode this entry in my local file and set the size to 100% and now the table displays correctly with scrolling enabled. It could also be over-ridden with an inline style if that's your only option. So if your column and heading widths are not matching up, especially in IE, start by disabling all your css files and see if that fixes it. If it does, it's just a process of elimination from that point on.