I have been using CSS3 pie for awhile now and have gotten it to work everywhere else except in this one particular case. Basically whenever I am loading content on the page dynamically in a template style, the css3 pie features I am using in this case linear-gradient and border-radius do not get applied to my buttons, I am using the <button> tag with type="button". All of the other buttons on the page are displaying correctly and they are using the exact same class for the styles but for the buttons that are being placed on the page dynamically they do not have the styles applied correctly. I have position relative on parent and child elements. I also tried the z-index fix and because this is meant for a product page which could have hundreds of these buttons shown I have -pie-lazy-init:true; to help get the loading time down significantly.

Basically my question is if you are loading content dynamically and your CSS is loaded first before the javascript, is this the issue as to why the buttons are not being rendered correctly? Any help would be greatly appreciated as I have been spending a lot of time trying to figure this out .

Thanks!

Dynamically added content should be picked up automatically, assuming you're using the PIE.htc behavior and not PIE.js.

I've heard other users have issues specifically with jQuery though. I'm wondering if it has something to do with jquery inserting content via innerHTML rather than DOM insertion? Would you know what method jQuery is using to insert your content? Can you build a standalone minimal testcase demonstrating the issue?

Hi Jason,

Thanks for your response I really appreciate it. I am using the htc file instead of the js file. I work for a company called UTC (United Technologies Company) and I was trying to see if I could get you access to one of our staging or Dev servers but unfortunately they won't give people outside the company access. I also can't create a test case without having access to one of our DB's since it is pulling all the data from there. So I have an option I am not sure if you are open to it but we could do a screen share where you could see the code and a running example. While do this we could have a conference call on the phone with myself (Front-end Developer) and our Back-end .Net Developer. I understand you are busy so if this not an option no problem.

Basically we are not using .innerHTML() we use .append() for the buttons. We are using an older version of jQuery 1.6.2 as well. Unfortunately this is the only option I can think of if you have any better idea's please let me know. Thanks again for your help!

If I'm not mistaken, .append() uses innerHTML behind the scenes doesn't it? Or insertAdjacentHTML?

Anyway, you shouldn't require the backend services if you replace them with static content files. Or is that too difficult?

Ideal would be a minimal file anyway where there's only enough on the page to demonstrate the issue. It wouldn't even have to look anything like your site.

I got approval to try to recreate a testcase for you. I most likely won't have time till next week to work on it but I will keep you posted and let you know if I can recreate the issue.