Format messed up with multiple link rel stylesheet CSS (HTML)
Question
Edit: To the person that just downvoted this without even leaving a comment, that really didn't help at all. Even explaining why this is a dumb question would be more conducive to learning and spreading knowledge.
Ok disclaimer: I am totally building a website the wrong way. To start off, I copied the source code from a Wordpress blog and I've been editing it by taking out stuff and seeing what happens to the page. So take into account any explanation will probably have to be very rudimentary for me to understand.
So I finally got a page that I like. I included a table from Data Tables, sort of like this one .
But I also want something in my page to be collapsible, maybe something like this .
So the problem I've found is that there are two link rel="stylesheet" css things that aren't meshing.
This one makes the collapsible thing work
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
And this one makes the tables work
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
But together the collapsible works and the table works, but then the format of the header is all messed up and doesn't work.
This is the messup when both the link rels are there
This is when just the table code is there but not the collapsible
Any ideas? I'm assuming I have too many references that are overlapping, but I'm not really sure the standards/rules for this or how to fix it. Here is my head code. If necessary, I can give more code.
<head>
<title>Training– Academy</title>
<link rel='stylesheet' id='screen-css-1' href='https://s1.wp.com/wp-content/themes/pub/pique/style.css?m=1465934028h' type='text/css' media='screen' />
<link rel='stylesheet' id='pique-fonts-css' href='https://fonts.googleapis.com/css?family=Lora%3A400%2C700%2C400italic%2C700italic%7CKarla%3A400%2C700%2C400italic%2C700italic&subset=latin%2Clatin-ext' type='text/css' media='all' />
<script type='text/javascript' src='https://s1.wp.com/_static/??-eJyFzksKAjEMANAL2Sn+Rl2IZ5lPpqS2TW1Si57eCroQB4VAQvISoktUGAaXR2Bta1wypNsrNZYX+hdQHk3qBBqP4Y0HCgJBntZTjw5UZkidqb16aKIZF4nFA3NFM9PPlzBcEcpfZkFiN5xVAsb719XekVHRZYOBda0NjJRFTeQcFV1wNCB15+SPy03bblfrw25vH0h6b8A='></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<style>
#wrapper {
width: 100%;
height: auto;
}
#centered {
margin: 0 auto;
width: 700px;
}
#list {
margin: 0 auto;
width: 610px;
}
</style>
<script>
$(document).ready(function() {
$('#trainingtable').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
</script>
<script>
$(document).ready(function() {
$('#linktable').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
</script>
</head>
1 answers
solution1
1 ACCPTED 2016-06-25 18:25:16
I'm not sure, but you don't need to be calling this document.ready twice.
You're calling the same two functions that do the same thing at the same time.
Try this:
$(document).ready(function() {
$('#linktable').DataTable();
$('#trainingtable').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
Anyway, that probably isn't your issue.
You should inspect the header in your browser and make sure that your two stylesheets aren't both trying to style the element different ways.
Does that make sense?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.