thead > tr background-image disappearing IE lte 7

RalphK

I've added a background-image and styles to the header row of the database. This because the sorting images are added to the th cell so i couldn't apply it there. it does work in other browsers but not in IE lte 7.

Here's my code:
[code]
$('#<%=grdFacturen.ClientID %>').dataTable({
"bAutoWidth": false,
"bJQueryUI": false,
"bPaginate": true,
"aaSorting": [ [1, 'desc'] ],
"bFilter": navigator.appName != "Opera",
"sPaginationType": "full_numbers"
});
[/code]

I've tried to add them afterwords but thats not working
[code]
"fnDrawCallback": function() {
//alert( 'DataTables has redrawn the table' );
$('thead:eq(0)>tr').css('background-image', 'url("<%=ResolveUrl("images/table_bg.gif")%>")');
$('thead:eq(0)>tr').css('background-repeat', 'repeat-x');
$('thead:eq(0)>tr').css('background-position', 'top left');
}
[/code]

Here's my CSS:
[code]
.DataTable thead tr
{
background-image: url("../images/table_bg.gif");
background-repeat: repeat-x;
background-position: top left;
}
[/code]

I've also tried a seperate class with the styles but thats also not working in IE lte 7.
Does anybody have an idea?

Ps: I added the datatables to a DotNetNuke module (C#.NET)

achlan

Hi,

nearly like this it is working for me:

[code]
table.display thead tr {
background: url(../images/table_bg.gif) repeat-x top left;
}
[/code]

Regards
Achlan.

RalphK

Sorry, still not the solution. The thing thats really weird, is that the styles is correctly applied before the datatables renders. When i dissable it, it's ok. Datatables apparently removes the style.

achlan

maybe this can help:
[code]
$('#<%=grdFacturen.ClientID %>').dataTable({
"bAutoWidth": false,
"bJQueryUI": false,
"bPaginate": true,
"aaSorting": [ [1, 'desc'] ],
"bFilter": navigator.appName != "Opera",
"sPaginationType": "full_numbers",
"fnInitComplete": function() {
$("table.display thead tr").css("background":"url(../images/table_bg.gif) repeat-x top left");
}
});
[/code]

allan

One option might be to use jQuery UI styling for DataTables (bJQueryUI:true) - you don't need to use a themeroller theme if you don't want to, but what this does is to put the 'sorting' icon into it's own little element. Have a look at this page with Firebug (or whatever): http://datatables.net/styling/themes

Regards,
Allan

RalphK

Solved the problem by moving the TR background image to the table background. Not a good solutions but it works. Ran out of time for fixing it correctly.

[code]
.DataTable
{
background-image: url("../images/table_bg.gif");
background-repeat: repeat-x;
background-position: top left;
}
[/code]