Conflict between PIE and JQueryUI's accordion

Question

I'm using PIE to achieve some cross-browser CSS3 effects (gradient backgrounds, rounded corners, drop shadows, etc), but it's messing up my jquery accordion something awful.

Basically when PIE inserts its css3-container elements into the DOM, the jquery accordion code can't recover, because it's expecting the accordion container to be filled exclusively with an alternating list of H3 and DIV elements.

Has anyone found a way to make these two tools play nice together?

Answer 1

Instead of CSS PIE use pie.js the simple benifit that pie.js gives you is that you decide when to apply pie classes you can find a nice documentation on how to use pie.js here . Simply by the javascript way the pie will be applied after the code is executed by jQuery hence it should NOT mess with the markup. [though i am going to test it ]

And your code with pie should look something like

$('.accordion').accordion({
  parameter:value;
  });
$('.pieElement').each(function(){
  PIE.attach(this);
});

Another method of doing this is by using gutters , while programming mobile webapps because of webkit i found out how useful gutters can be especially with polyfills .

Using gutters your code can look like

   <div id="accordion">
<h3><span class="gutter"><a href="#">Section 2</a></span></h3>
<div>
      <div class="gutter">
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
      </div>
</div>
  </div>

then apply your PIE CSS3 on gutters , from what i have read about PIE it seems that it applies a VML markup inside the parent of the element and if so using gutters the style will be applied without changing your markup.