View Full Version : Removing panel header's gradient works in everything but IE8

21 Feb 2013, 8:58 AM
I'm working on a site that uses a number of panels and I would like to remove the gradient from all of them.

In my sass file, I've set the sencha panel gradient variable to the following:


This has removed the gradient from all of the panels on all browsers except for IE8. I tried to figure out where it's still getting applied in IE8, but the dev tools for IE8 are not all that great (or I'm unfamiliar with them to the point that I can't efficiently find where the gradient is still getting applied).

I've searched around on the forum and around the internet and I know IE needs some special handling, but I can't seem to find exactly what I need to put in place for it to work with sencha. can anyone lend a hand??

21 Feb 2013, 11:56 AM
IE uses images.


21 Feb 2013, 1:10 PM
Ah, cool thanks for that Scott.

How would I override those images so they're not used?

21 Feb 2013, 1:18 PM
Have a look at the css:


.x-nbr .x-panel-header-default-framed-bottom-mr {
zoom: 1;
background-image: url('../../resources/themes/images/default/panel-header/panel-header-default-framed-bottom-sides.gif');
background-position: 0 0; }

21 Feb 2013, 5:07 PM
Ah perfect! Thanks!