CSS3 PIE Forums

No gradient background in IE8 [RESOLVED]
Page 1 of 1

Author:  kungmidas [ Wed Sep 26, 2012 9:53 am ]
Post subject:  No gradient background in IE8 [RESOLVED]

Thanks for a great thing :)
I've ran in to a problem with IE8...

I have CSS like this:

// ....
-pie-background: linear-gradient(#5b92e6, #194b96);
behavior: url(/_layouts/Redacted.Redacted.Redacted.Branding/Main/dialog/PIE.htc);
// ....

This works in IE9, but not in IE8 - nothing is displayed (there are no css3-containers in the code). If I open IE dev tools, and change this to this page relative URL:

behavior: url(../_layouts/Redacted.Redacted.Redacted.Branding/Main/dialog/PIE.htc);

...the gradient immediatelly displays. I still can't see css3-containers in the code, I assume this is because dev tools "didn't notice" they were added. So I'm thinking obvious solution, I change the CSS file to that path instead.

// ....
-pie-background: linear-gradient(#5b92e6, #194b96);
behavior: url(../_layouts/Redacted.Redacted.Redacted.Branding/Main/dialog/PIE.htc);
// ....

This also works in IE9, but this still gives the same problem in IE8! If I use IE dev tools to change it back to:

behavior: url(/_layouts/Redacted.Redacted.Redacted.Branding/Main/dialog/PIE.htc);

The gradient shows!

So, regardless if I set the original path to server relative or HTML file relative, it doesn't work until I change it after page load to the other.

The exact same problem happens on radial corners on another div.

I'm running 1.0.0. I previously ran beta 4, that worked perfectly in IE8 only with page relative URL (../) but not at all in IE9.

All "behavior" are accompanied by a "zoom: 1;".

The bigger picture is that this is a SharePoint site, in which a jQuery.UI.dialog that has border radius and a child div containing the dialog title that has the gradient background.

Any ideas what I'm doing wrong or how I can fix/work around the problem?

EDIT: A really weird thing is, it's not as simple as changin the URL from the original to another just triggers a refresh. Let's say I have two valid URLS:
and the equally valid

If I set "xx" in CSS, it will not work until I change it to yy with IE dev tools. Here's the strange part: If I change back to "xx" using dev tools, the background will dissappear!
If I change the "original" value in the CSS from xx to yy, yy will instead be broken - it will start working if I change to xx using the dev tools, and break again if I change back to yy...

EDIT: There were a javascript error in a completely unrelated component on the page. Fixed that error, this problem went away. Leaving this in the rare chance someone else run into something similar...

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group