DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

jQuery DataTables is messing op my CSS grids in IE8

jQuery DataTables is messing op my CSS grids in IE8

bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
edited June 2012 in DataTables 1.9
I am using ASP.NET MVC3 with the jQuery Datatable plug in. I am having an issues with my CSS layout when the datatable is on a page. If there is no datatable then everything displays fine. When the datatable is on the screen then it overlaps the footer of my website. I can't seem to get this to display correctly. I have a grid layout using the YUI3, and this is what I all use from YUI3 (in this order):

cssreset-min
cssfonts-min
cssgrids-min
cssbase-min

This works fine in the latest version of FireFox. I am only testing on IE8, this is a requirement and most of the people at my work uses IE8.

I have minified my HTML so that only the bare minimum is available. This is my HTML:

[code]<!DOCTYPE html>


My Website







Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.










Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.










Banks Dashboard
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.












Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.










Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.






$(document).ready(function () {

$('#banks-datatable-container').html('');
$('#banks-datatable').dataTable({
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade" }
],
"bAutoWidth": false,
"bFilter": false,
"bLengthChange": false,
"bProcessing": true,
//"bServerSide": true,
"bSort": false,
"iDisplayLength": 11,
"sAjaxSource": '/Administration/Bank/List2'
});
});





[/code]

This is the only CSS that I currently use together with the CSS of YUI3:

[code]body
{
margin: auto;
width: 1025px;
}

#nav
{
width: 300px;
}

#main
{
width: 725px;
}[/code]

Can someone please help me get this sorted out? I have tried tried adding clear:both but it didn't work.

Replies

  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    I would be happy to help, but please make a working example in http://live.datatables.net/#javascript,html,live
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    Here it is:

    http://live.datatables.net/efosuj/3/edit

    It looks correct in the preview available. Copy and paste the code to a separate file and open in IE 8 please. Then you can see the overlapping over the footer. I marked the header and footer in green just for layout purposes.
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    Weird, your example looks fine in my IE8 (Win 7)
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    I have the same setup, checked it out on another work pc and it gives the same issue.
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    I don't have any service packs installed either for IE8. We have a about 32 000 users, most still running on IE8. I can't get them all to upgrade to IE9. Is there nothing that you can maybe suggest what to do?
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    Did you put your full HTML through the w3c html validator?
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    Yes I just did and it succeeded.
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    Hi!

    I just managed to reproduce your problem. Adding 'overflow: auto;' to seems to do the trick.
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    edited June 2012
    Hi,

    I did this: but I still get the issue.

    Thanks
    Brendan
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    http://live.datatables.net/efosuj/5/edit#javascript,html,live

    Added

    [code]
    /**
    * Prevent IE8 messing things up
    **/
    if (navigator.userAgent.toString().indexOf('MSIE')>=0) {

    jQuery('#main-container').css('overflow', 'auto');
    }
    [/code]

    inside $(document).ready.
  • bioluminescencebioluminescence Posts: 16Questions: 0Answers: 0
    Thanks this solves my code. But now why does the style have to be added after the grid is loaded?
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    Eh... because IE8 forgets the overflow:auto when the Datatable is made? To be honest, I stopped wondering why IE does certain things a long time ago :).

    Good luck with your project!
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.