DOCTYPE Changes Behavior in IE
DOCTYPE Changes Behavior in IE
abracadabra
Posts: 5Questions: 0Answers: 0
Hello, I'm using DataTables along with jQuery Tabs. I'm having an issue with the table width expanding a little bit after each tab switch, but then I found that if I change the DOCTYPE it works normally. I created a video demonstrating the problem.
The video shows the correct behavior first, then I go in and change the DOCTYPE to the one I'd like to use (my "Original" DOCTYPE), but as you'll see it creates a table-width issue with DataTables when the tab is switched multiple times. I then go back into the code to demonstrate the correct behavior again with the "newer" DOCTYPE.
Video: http://www.youtube.com/watch?v=oDrxPyNdOF4
"Original" DOCTYPE that exhibits the problem: [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/code]
New DOCTYPE that fixes DataTable width problem: [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code] (took out the "http//" in front of "www.w3.org" because it was seeming to break the "code" tag.)
Here's the code to initialize jQuery Tabs and DataTables:
[code]jQuery(document).ready(function() {
// Create Tab Navigation
jQuery("#tabs").tabs({
"show": function(event, ui) {
var oTable = jQuery('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
});
jQuery('table.display').dataTable({
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"sScrollY": "300px",
"bScrollCollapse": true,
"bJQueryUI": false,
"aoColumnDefs": [
{"sWidth": "10%", "aTargets": [ -1 ]}
]
});
});[/code]
Anyone have any ideas how I can get DataTables to work while still using the "Original" DOCTYPE shown above? If I change the DOCTYPE to the one that fixes the width issue, it breaks a lot of my other CSS formatting in IE and is not really the path I'd like to go.
Thanks for your time!
- Adam
The video shows the correct behavior first, then I go in and change the DOCTYPE to the one I'd like to use (my "Original" DOCTYPE), but as you'll see it creates a table-width issue with DataTables when the tab is switched multiple times. I then go back into the code to demonstrate the correct behavior again with the "newer" DOCTYPE.
Video: http://www.youtube.com/watch?v=oDrxPyNdOF4
"Original" DOCTYPE that exhibits the problem: [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/code]
New DOCTYPE that fixes DataTable width problem: [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code] (took out the "http//" in front of "www.w3.org" because it was seeming to break the "code" tag.)
Here's the code to initialize jQuery Tabs and DataTables:
[code]jQuery(document).ready(function() {
// Create Tab Navigation
jQuery("#tabs").tabs({
"show": function(event, ui) {
var oTable = jQuery('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
});
jQuery('table.display').dataTable({
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"sScrollY": "300px",
"bScrollCollapse": true,
"bJQueryUI": false,
"aoColumnDefs": [
{"sWidth": "10%", "aTargets": [ -1 ]}
]
});
});[/code]
Anyone have any ideas how I can get DataTables to work while still using the "Original" DOCTYPE shown above? If I change the DOCTYPE to the one that fixes the width issue, it breaks a lot of my other CSS formatting in IE and is not really the path I'd like to go.
Thanks for your time!
- Adam
This discussion has been closed.
Replies
Having said that - what version of DataTables are you using? My guess is 1.8.1 (the current release), given what you are seeing. This actually has a small bug in it which causes the expanding table issue - the 1.8.2 development version (available as the 'nightly' here: http://datatables.net/download ) fixes that. Could you try that and let us know how you get on.
Thanks,
Allan
I am going to use the newer DOCTYPE anyways since it seems to make the CSS more "reliable" across all the browser platforms, I just need to re-work a little of it. This is where Conditional CSS comes in handy!
Thanks for your response and knowledge, Allan.
- Adam