CSS3 Pie working sporadically

Question

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

Answer 1

If the disappearing items are being styled by css loaded by a script, load that script in the head after jQuery. I noticed two scripts didn't apply styles in my work in IE8 and when I loaded scripts in the head, they worked again. I have my jQuery lib loading in the head but all others in the footer, however two scripts that require fallbacks applied by the script need to be loaded in the head.

Without seeing the code, IE8 disappearing list items usually gets fixed by adding a position relative on the ul or the wrapper, or both. If that doesn't work, keep it on there and fiddle with the z-index. Then re-check in good browsers or use IE8 CSS hacks.

Some other ideas to try:

• Make sure you have the html5 shiv in your code and that it's loading (google is not always up). I host it locally with my modernizer build. Read this: Header disappears and lists become unstyled in IE 8 and below

• If the disappearing items are being styled by css loaded by a script, load that script in the head after jQuery. I noticed two scripts didn't apply styles in my work in IE8 and when I loaded scripts in the head, they worked again. I have my jQuery lib loading in the head but all others in the footer, however two scripts that require fallbacks applied by the script need to be loaded in the head.