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

4 Oct 2012, 11:36 PM
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:

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: 39164

This is on IE: 39165

Any suggestion guys? :)

4 Oct 2012, 11:55 PM

You can use following code:

background: #273451 !important;

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

5 Oct 2012, 12:08 AM
Thanks sword-it (http://www.sencha.com/forum/member.php?427588-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.

5 Oct 2012, 3:27 AM
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.

8 Oct 2012, 9:20 PM
Thanks skirtle (http://www.sencha.com/forum/member.php?197255-skirtle) for your tips and explanation. sword-it (http://www.sencha.com/forum/member.php?427588-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.