jQuery DataTables is messing op my CSS grids in IE8, how to fix?
- by Brendan Vogt
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:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link href="/Assets/Stylesheets/hef2.css" rel="stylesheet" />
<link href="/Assets/Stylesheets/jQuery-DataTables/css/jquery.dataTables.css" rel="stylesheet" />
</head>
<body>
<div id="hd">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.</div>
<div id="bd">
<div class="yui3-g">
<div class="yui3-u" id="nav">
<div id="nav-container">
<div class="content">
<p>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.</p>
</div>
<div class="content">
<p>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.</p>
</div>
<div class="content">
<p>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.</p>
</div>
<div class="content">
<p>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.</p>
</div>
</div>
</div>
<div class="yui3-u" id="main">
<div id="main-container">
<div class="content">
<h1>Banks Dashboard</h1>
<p>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.</p>
</div>
<div class="content">
<div id="banks-datatable-wrapper">
<div id="banks-datatable-container"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="content">
<p>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.</p>
</div>
<div class="content">
<p>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.</p>
</div>
<div class="content">
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
<div id="ft">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.</div>
<script src="/Assets/JavaScripts/jQuery/jquery-1.7.2.min.js"></script>
<script src="/Assets/JavaScripts/jQuery-DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#banks-datatable-container').html('<table class="display" id="banks-datatable"></table>');
$('#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'
});
});
</script>
</body>
</html>
This is the only CSS that I currently use together with the CSS of YUI3:
body
{
margin: auto;
width: 1025px;
}
#nav
{
width: 300px;
}
#main
{
width: 725px;
}
Can someone please help me get this sorted out? I have tried tried adding clear:both but it didn't work.
Is the an online service like jsbin where I can paste/upload my HTML/CSS code/files?
Code can viewed at: http://live.datatables.net/efosuj/3/edit. It displays correctly in the available viewer but when run separate in IE8 then it gives issues.
UPDATE 2012-06-12
I managed to add the following and it works, but I would like to add it in a style, tried it but it didn't work:
if (navigator.userAgent.toString().indexOf('MSIE') >= 0) {
jQuery('#main-container').css('overflow', 'auto');
}
This was added after the grid was loaded. Is this the only way to do this?
