Row and Header(Footer) widths do not match in IE

TheDenominater

Hi,
I'm having trouble implementing horizontal scrolling on my table in IE 7 and 8 (don't need 6). When I enable scrolling there is a problem in IE about the widths of the rows and the header/footers. For some reason the rows widths do not align with the header widths. Typically the rows have wider columns than the headers. I also see a sliver of a duplicate header below the "true" header. Hopefully this shot makes things clearer.

http://imgur.com/fGYhr.png

My table initialisation is as follows:
[code]
hmis_query_server_temp: function(query_name, target, parameters){
$.uiLock();
$.ajax({
url: '/php_scripts/queries/query_temp_server.php',
data: {query_name: query_name , parameters: parameters},
success: function(data) {
$(target).html(data);
var oTable = $("#dataSet").dataTable({
"oLanguage": {
"sSearch": "Search all columns:"
},
"sScrollX": "100%",
"sDom": '<"top"<"button_holder">fl>rt<"bottom"ip>',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/php_scripts/server_processing/temp_server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "query_name" , "value": query_name} );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
$.uiUnlock();
} );
}
});
});
}
[/code]
My css :

http://pastebin.com/JL8Gpjs7

This only happens in IE and only when scroll is enabled. Any ideas why? My css is just a slight modification of the demo file provided with the plugin. I've verified my JSON output with JSLint and it is valid.

And on a side note, I'm just wondering how the bAutoWidth works, is it supposed to make every column the same width? It seems to do that to me.

Thanks for the help.

allan

If you open the Firebug console in Firefox, do you see any console messages from DataTables? The most likely reason for the misalignment is that DataTables can't fit the information into the available space for whatever reason. That might not help with IE, but it might give a clue... The next step would be to alter the console.log() call in DataTables to an alert() and see if it alerts in IE... Does it perform the same way in IE8 (standards mode) as IE7?

As for auto width - yes it does a lot more. It will try to calculate the column widths to be used (based on the table flow) and then use those widths.

Allan

TheDenominater

Hi thanks for the response. I should correct myself first, the problem only occurs in IE7 and IE8 Compatibility mode, it doesn't occur in regular IE8. I've also noticed that in Firefox 3.6 I get the slim header duplicate as was shown in the image, but the misalignment does not occur.

http://imgur.com/qaRA4.png

There are no console messages in firebug, I'm not sure what you mean by changing the console.log() call to alert though, doesn't _fnLog already do that for me? Sorry if I misunderstood.

Thank you so much for all your help.

allan

_fnLog will only alert() level '0' messages. The messages we are looking for here are level 1 messages, so ignored in IE by default...

However - I'm not sure that is going to help. I believe that there is a bug with measuring widths of an input box in a table footer in IE7 (including IE8 compatibility - since that is basically IE7). Have a look at this conversation between iuliandum and myself: http://datatables.net/forums/comments.php?DiscussionID=2293#Item_35 . I'm not sure how much I can do to fix this issue I'm afraid :-(

Allan

TheDenominater

Thanks,
The problem does go away when I remove the input elements in the footer, I'll probably just do that for IE 7.

Any ideas about the issue in Firefox? I've tried adding a rule to hide that extra header row, but it does more harm then good.

allan

I noticed the Firefox issue when writing the scrolling features as well - and in this case I believe it's a Firefox bug... Do you have border-collapse defined in your CSS? The way DataTables works is to have a 'hidden' header (0 height) which is what you are seeing - but to should do everything possible to make it completely hidden. This Firefox bug was the only one I found which caused the problem. You can try setting border-spacing: 0, assuming it is the same issue... Which version of Firefox are you using?

Allan

TheDenominater

I'm using 3.6.8 at the moment. I did have border collapse set unintentionally(Yahoo CSS reset), so I overruled that and it fixed the problem in Firefox. Now IE 7 ...

http://imgur.com/k4RjL.png

Thanks again so much for your help.

allan

Interesting - I'm not sure I've seen that one in IE7... Does it happen for you on my example: http://datatables.net/examples/basic_init/scroll_y.html ? If not, then the difference between the css definitions would be interesting.

Failing that, you could use Conditional-CSS: http://conditional-css.com/ :-)

Allan

jacek.bator

I have similar problem with IE6 and vertical scroll (FF is fine). Table initialization

[code]
$(document).ready(function () {
$('#example').dataTable({ "bJQueryUI": true,
"bSort" : true,
"bFilter" : false,
"bLengthChange": false,
"bInfo": true,
"bPaginate": false,
"aoColumns": [{ "bSortable": false }, null, null, null, null, null, null, null, null, { "bSortable": false}],
"sDom": 't<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"sScrollY": "250px"
});
});
[/code]

css files from examples for jquery ui. Headers widths don't match columns widths. I found that when I remove border-collapse: collapse; from table.display style

[code]
table.display {
margin: 0 auto;
width: 100%;
clear: both;
padding: 0;
margin: 0;
border-collapse: collapse; /* remove this line */
}
[/code]

headers and columns are aligned correctly, but of course borders are doubled. Any advice or hint?