1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    15
    Vote Rating
    0
    AesonErryl is on a distinguished road

      0  

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

    My topbar (as docked item) in JS:

    Code:
            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:
    Code:
    .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?

  2. Hi,

    You can use following code:

    Code:
    .timeTrackerTbar.x-toolbar{
    background: #273451 !important;
    }
    you can see this link :http://jsfiddle.net/EVYm3/47/

  3. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    Answers
    124
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default

    Hi,

    You can use following code:

    Code:
    .timeTrackerTbar.x-toolbar{
    background: #273451 !important;
    }
    you can see this link :http://jsfiddle.net/EVYm3/47/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    15
    Vote Rating
    0
    AesonErryl is on a distinguished road

      0  

    Default

    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.

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,786
    Vote Rating
    378
    Answers
    581
    skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute skirtle has a reputation beyond repute

      0  

    Default

    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.

  6. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    15
    Vote Rating
    0
    AesonErryl is on a distinguished road

      0  

    Default

    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.

Thread Participants: 2