IE Quirks! Random misaligned row columns.

ccable99

I'm running into a weird issue with IE randomly misaligning columns in rows, see pics. No problems in Firefox!

https://lh3.googleusercontent.com/-g5IG3O22lOY/TklHHuf_y0I/AAAAAAAAAlI/5qTvypYsqMw/s800/pic1.jpg
https://lh5.googleusercontent.com/-9VMP9US-N9w/TklHHgHlJfI/AAAAAAAAAlE/9fmlwuKQBzE/s800/pic2.jpg

Here's the code I'm using.

Thanks in advance!

Chris

[code]
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>





$(document).ready(function () {
var initHeight = ($(window).height() - ($('#header').height() + $('#footer').height()));
var initWidth = $(window).width() - 150;
//console.log(initHeight + " : " + initWidth);

var oTable = $('#rebateList').dataTable({
"sScrollY": '400px',
"bPaginate": false,
"bInfo": false,
"aoColumnDefs": [
//{ "bVisible": false, "aTargets": [0,1,2,3] },
{"iDataSort": 0, "aTargets": [3] },
{ "bSortable": false, "aTargets": [0, 1, 2] },
{ "bSearchable": false, "aTargets": [1, 2, 3] },
{ "sWidth": "20px", "aTargets": [1, 2, 3] }
],
"aaSorting": [[10, "desc"]],
"bAutoWidth": false
});

$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});

$('#rebateList_wrapper, .dataTables_scrollBody,.dataTables_scrollHead,.dataTables_scrollHeadInner,.dataTables_scrollHeadInner table').width($('#container').width() - 150);
$('#rebateList_wrapper').height($('#container').height() - 105);
$('.dataTables_scrollBody').height($('#rebateList_wrapper').height() - ($('#rebateList_filter').height() + $('.dataTables_scrollHead').height()));
$(window).resize(function () {
var width = $('#container').width() - 150;
var height = $('#container').height() - 105;
var filterHeight = $('#rebateList_filter').height();
var scrollHeadHeight = $('.dataTables_scrollHead').height();
//
// do it
$('#rebateList_wrapper, .dataTables_scrollBody,.dataTables_scrollHead,.dataTables_scrollHeadInner,.dataTables_scrollHeadInner table').width(width);
$('#rebateList_wrapper').height(height);
$('.dataTables_scrollBody').height(height - (filterHeight + scrollHeadHeight));
});

});



.dtWrapper { font: 12px Arial, Helvetica, sans-serif; }










ABBR.
RTF
KWH
MEF
$$$
MODIFIED BY
MODIFIED ON



<% if (Model.Rebates != null)
{ %>
<% foreach (var rebate in Model.Rebates)
{ %>

<%: rebate.RebateStatus.ToString().Trim() %>



<%: rebate.RebateType.Abbreviation.Trim() %>
<%: rebate.RTFNum.Trim() %>
<%: rebate.KWH.ToString().Trim() %>
<%: rebate.MEF.ToString("F2").Trim() %>
<%: rebate.RebateType.IPLCredit.ToString("C", System.Globalization.CultureInfo.CurrentCulture).Trim() %>
<%: rebate.ModifiedBy.ToString().Trim() %>
<%: rebate.ModifiedOn.ToShortDateString().Trim() %>

<% } %>
<% } %>




[/code]

abe1001

I'm having the exact same problem. It works perfect in IE 8, but in IE 9 some colums acts as described by ccable99.

Hope someone can help.

ABe

rjones

Have you read and tried the solution here?

http://www.datatables.net/forums/discussion/5481/bug-ghost-columns-when-generating-large-tables/p1

This solution definitely solved the known bug in IE9 (not in datatables, but in IE9), BUT whether it can also do anying for you in quirks mode, is another question entirely...