CSS Display Issue/Conflict in Pagination

kraftomatic

Hi All,

I'm trying to break down where the CSS is breaking the styling of the pagination controls, shown here:

http://live.datatables.net/yohuluco/10/edit

It lies within this CSS file:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />

And most likely here:
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #111;
background-color: #585858;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
/* Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
/ Chrome10+,Safari5.1+ /
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
/ FF3.6+ /
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
/ IE10+ /
background: -o-linear-gradient(top, #585858 0%, #111 100%);
/ Opera 11.10+ /
background: linear-gradient(to bottom, #585858 0%, #111 100%);
/ W3C */
}

Still, I'm not sure how to fix this properly. I can't remove the CSS and my attempts to overwrite/prioritize it with a fix within my page, have proven unsuccessful.

I realize this is looking for a needle in a haystack, but I have to think there are examples in use where these same CSS files would be used together. Is there anything glaring I might be missing?

Thank You,

Ed

kthorngren

You are using Bootstrap but you haven't loaded the Datatables Bootstrap integration files as described in the Bootstrap 3 Styling doc. Here is an example.

I commented out your files and used the Download Builder to get the proper files. See this updated example:
http://live.datatables.net/yohuluco/11/edit

Kevin

kraftomatic

Thanks Kevin, that did the trick. I was surprised to see the gray icons for sorting on the columns are gray for Bootstrap, and not the blue arrows, but oh well. No biggie.

Ed

allan

Yes we use the icons that are built into Bootstrap to make the integration more complete. If you want to colour them, you can do so with CSS.

Allan