i'm trying to use pie to round the corners of the border around the answer to questions in an faq page. the problem occurs in both ie7 and 8. unfortunately, i don't have access to either vista to win7, so i can't test later ie releases.

the base html for each q & a pair is like so:


<div class="faq-item">
<h3 class="hidebelow"><strong class="faq-q">Q:</strong> Do I stay in my vehicle during the wash process?</h3>
<p style="background-color: #f1f1f1; padding:8px;border:2px solid #ccc;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px">
<strong>A:</strong> Yes, you remain in your vehicle during the wash process. Please see signage for additional instructions.
</p>
</div>

and the relevant jquery code is:

$(document).ready(function(){
$("h3.hidebelow").append("<span>&nbsp;</span>");
$("h3.hidebelow").each(function(){
$(this).next("p").hide();
});
$("h3.hidebelow").toggle(function(){
$(this).addClass("active");
$(this).next("p").show("fast");
},function(){
$(this).removeClass("active");
$(this).next("p").hide("fast");
});
});

the appended span is used to control an open/close marker managed by the 'active' class for this element.

when i add 'behavior:url(/js/PIE.htc);position:relative' with or without z-index:0 the page loads with the answer paragraphs visible.

of course, without pie, there's no problem, except for the square corners.

i have another div on the page (no jquery code associated with it) and that works exactly as expected and i get beautifully rounded corners.

appears that pie is trumping jquery's hide.

while not a noobie, i have no idea how to fix this.