I am working on bringing our company's web application into the 21st century and am trying to use some of the new CSS3 features like border-radius and box-shadow for a more modern visual effect. However, over 90% of our userbase is still on IE8, which doesn't support these options. CSS3 Pie seemed like the perfect solution, but I'm running into some odd problems.
Through some trial and error I have managed to get all of the CSS properties that I want to use working in IE8. Some examples of the classes used are:
.pageTitle {
border-radius: 12px;
color:#fff;
text-shadow: 1px 1px 0px #666;
box-shadow: 5px 5px 3px #888888;
background: -webkit-linear-gradient(blue, black); /* For Safari */
background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */
-pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/
behavior: url(../../common/compatibility/PIE.htc);
}
.headerGradient {
background: -webkit-linear-gradient(blue, black); /* For Safari */
background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */
-pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/
behavior: url(../../common/compatibility/PIE.htc);
position:relative;
}
The first is used on a div at the top of the page with just a word or two of text inside. The second is used on the header of some of our display tables.
Occasionally, when I visit a page using these classes, the elements will simply not appear. It looks almost like the classes are being ignored (causing the elements to render with a white background), but the text within the elements should then show up in black and still be visible. It is not; I just see an open white space (though images inside these elements will still appear)
When this occurs I can cause the "pageTitle" div to appear correctly by simply moving my mouse over it. However, this does not work on the "headerGradient" (and similar) table heads. Refreshing the page sometimes resolves the issue, but it usually takes quite a bit of work to get CSS3 Pie to kick in again.
I cannot reproduce this issue on the CSS3 Pie website, nor have I seen it discussed elsewhere, so I think there may be something incorrect in my implementation. I would appreciate any thoughts.
UPDATE
By moving the pie files to my webroot, where the shell page of our application lives, some of these issues seem to have disappeared (though it's difficult to tell with a sporadic problem). However, there are still instances where headers will appear without styling until I move the mouse over them. All of my styles applied to CFLayoutAreas (ext-js tabs and accordions) are not working correctly:
/* Controls the header of the cflayout accordions. */
.x-accordion-hd {
background: -webkit-linear-gradient(#9999ff, #333366); /* For Safari */
background: -o-linear-gradient(#9999ff, #333366); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#9999ff, #333366); /* For Firefox 3.6 to 15 */
background: linear-gradient(-0.5deg, #333366, #9999ff); /* Standard syntax */
-pie-background: linear-gradient(top, #9999ff, #333366); /*ie 6-9 via PIE*/
behavior: url(PIE.htc);
position:relative;
}
.x-tab-strip,.x-tab-left,.x-tab-right {
border-radius:5px 5px 0px 0px;
background: -webkit-linear-gradient(#9999ff, #333366) !important; /* For Safari */
background: -o-linear-gradient(#9999ff, #333366) !important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#9999ff, #333366) !important; /* For Firefox 3.6 to 15 */
background: linear-gradient(-0.5deg, #333366, #9999ff) !important; /* Standard syntax */
-pie-background: linear-gradient(top, #9999ff, #333366) !important; /*ie 6-9 via PIE*/
behavior: url(PIE.htc);
position:relative;
}
In fact, the tabs and tab bar disappear completely.
I would welcome any suggestions.
UPDATE 2
By moving the PIE include to the bottom of the page, most of the issues have disappeared. CFLayout still isn't playing nice, so I've simply disabled styling of the layout area itself using PIE.
My one remaining issue is that PIE doesn't seem to adjust itself accordingly for page updates. When our detail pages load there is a cfLayout in the center of the page and buttons styled with PIE at the bottom. The buttons appear correctly on page load, while the cfLayout is still invisible. Then the cfLayout appears and pushes the buttons down the page. Sometimes, however, the PIE styling for the buttons will remain where they loaded instead of moving down the page with the buttons themselves.
Is there any way to call PIE to force a position update based on the parent element's current position?.
