Search code examples
cssbuttondatatablesbackground-colortabletools

CSS / TableTools: Button background-color does not change

I am using DataTables with the jQuery plugin TableTools and would like to apply my own styling to the buttons there.

Checking the buttons in question in Firebug shows me they all have a class "DTTT_button" to which I applied the below CSS.

This works for everything except for the background-color and the hover color which do not change at all. Can anyone tell me what could cause this or what I have to change to get this to work ?

How a button (anchor tag) looks in Firebug: 

<a id="ToolTables_policyTable_0" class="DTTT_button DTTT_button_xls">
    <span>Excel</span>
</a>

My CSS: 

.DTTT_button
{
    -moz-border-bottom-colors:none !important;
    -moz-border-left-colors:none !important;
    -moz-border-right-colors:none !important;
    -moz-border-top-colors:none !important;
    background-color:#F5F5F5 !important;
    background-image:none !important;
    border-color:#BBBBBB #BBBBBB #A2A2A2 !important;
    border-radius:4px !important;
    border-style:solid !important;
    border-width:1px !important;
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color:#333333 !important;
    cursor:pointer !important;
    display:inline-block !important;
    font-size:14px !important;
    line-height:20px !important;
    margin-bottom:0 !important;
    padding:4px 12px !important;
    text-align:center !important;
    text-shadow:0 1px 1px rgba(255, 255, 255, 0.75) !important;
    vertical-align:middle !important;
}

.DTTT_button:hover
{
    background-color:#E6E6E6 !important;
}

Many thanks for any help with this, Tim.

Solution

  • it seems to be working in my browser and I am using google chrome. I am not sure but your browser may not support html5. please comment back