CSS / TableTools: Button background-color does not change

Question

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.

Answer 1

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

Answer 2

You can try using an IE9 only stylesheet. People use this when IE doesn't format properly and they add more styling to fix the problem hovever doing this may cahnge the look in other browsers such as chrome that's the reason people use IE-only stylesheet. Try this...

<!--[if IE 9]>
special event you want to happen here or link to an external stylesheet for a certain    browser
<![endif]-->

or

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<![endif]-->

I hope this can help you. Please comment if you need additional help.

Answer 3

I found a solution that resolves the issue for me and works in all main browsers: No need for a separate IE9 style, instead I added filter:none !important.