CSS background-color for a toolbar is not working on IE. Any workaround guys?

[AesonErryl]

My topbar (as docked item) in JS:

        dockedItems: [{
          xtype: 'toolbar',
          dock: 'top',
          cls: 'timeTrackerTbar',
          style: {
            background: 'red' /*I have even tried using this, but still no luck on IE. :(*/
          },

and in CSS:

.timeTrackerTbar.x-toolbar{
  background-color: #273451 !important;
}

is not working on IE9 but are perfectly working on FF and Chrome. I though IE9 won't work with gradients only? This is just a simple-one color BG, and why is it not working?

This is on Chome: chrome.PNG

This is on IE: IE.PNG

Any suggestion guys?

[sword-it]

Hi,

You can use following code:

.timeTrackerTbar.x-toolbar{
background: #273451 !important;
}​

you can see this link :http://jsfiddle.net/EVYm3/47/

[AesonErryl]

Thanks sword-it for your response. I have tried your suggestion but I am still getting the same output on IE. background: #273451 !important; still won't take effect.

[skirtle]

Open up the IE dev tools (F12) and inspect the element in question. Then find the style rules for the background and it should be pretty clear what's going on.

The underlying problem will be that IE 9 has a background-image set and that's taking priority over the background-color. The solution that sword-it proposed should handle that but if it still isn't working it's probably a specificity problem that should become clear from a quick bit of digging in the dev tools.

[AesonErryl]

Thanks skirtle for your tips and explanation. sword-it's solution is already working. After inspecting the element, I cleared my IE9's cache to make the CSS changes to take effect as the problem lies there.