PDA

View Full Version : Window Header Gradient Internet Explorer 8



glafrance
25 Oct 2012, 2:42 PM
I have sass to style an ExtJS Window header that works fine except for Internet Explorer 8.

When I add this:


.x-window-header-default-docked-top-mr {
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr='#7FA4C4', EndColorstr='#305B80')";
}

I get this in Internet Explorer 8:

39590

Any idea how I can get this to look like this for IE 8:

39591

slemmon
25 Oct 2012, 9:42 PM
This is the site I use to make gradients - including for IE8
http://www.colorzilla.com/gradient-editor/

glafrance
26 Oct 2012, 10:01 AM
I think there may be a problem with the borders of one of the many divs that gets generated:

39599

There's just so many divs with so many classes its hard to know what to do.

glafrance
26 Oct 2012, 11:17 AM
This is the ID for what seems to be the div for the top 5px border, but I don't seem to be able to change the height, because it is defined inline, I assume by extjs:

switchUserWindow-frame1TL

I can't seem to find what produces the border under my gradient.

glafrance
26 Oct 2012, 11:25 AM
This image shows the div on top highlighted but how do I reference the lower border div?

39606

And then how do I get rid of them?

glafrance
26 Oct 2012, 11:46 AM
In IE dev tools, if I set the height of switchUserWindow_header-frame1TC to 0px it goes away. But height is defined inline in a style, so setting it via CSS even with !important does not seem to work.

The "bottom" border below the gradient seems to be a background, not a border, so I need to figure out what background it is, and make it transparent.

glafrance
26 Oct 2012, 11:49 AM
Setting height via CSS with !important DOES work.

Time to figure out that background.