Rounded corners appears only on one div

[GoogleCodeExporter]

I've created this css class :
.rounded-corners { -moz-border-radius: 4px; -webkit-border-radius: 4px; 
-khtml-border-radius: 4px; border-radius: 4px;}

I have some elements on pages, such as 
<div class="calc_box rounded-corners" id="calc_left">
///some code
</div>

<div class="calc_box rounded-corners" id="calc_right">
//some other code
</div>

etc..

Inside the html's head I put the call to the script (latest version, downloaded 
from this project's page yesterday) :

<!--[if IE]>
<script type="text/javascript" src="/path/to/curvycorners.js"></script>
<![endif]-->

I see that the scripts is being loaded ok.

On IE (7 and 8) I see the rounded corners appear only on the first of the divs, 
and the other divs with the "rounded-corner" class are keep being with regular 
not rounded corners.

Is this a known issue? What can be done?

Thanks,
Maor

Original issue reported on code.google.com by maorb...@gmail.com on 8 Feb 2011 at 4:15

[GoogleCodeExporter]

I had this problem as well, but it was because I was using transparent 
backgrounds on one of the divs through a MS filter. The "first" div which has 
the problem (that is, the second div listed in the DOM) was the one where Curvy 
Corners broke. I would check your styles and remove anything which might have 
caused the problem.

I can verify that it does work on multiple divs using a class definition, on my 
page I have 

<div class="roundCorners" id="events">
/// some code
</div>

<div class="roundCorners" id="paypal">
/// some code
</div>

etc...

and my CSS simply reads

.roundCorners {
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    padding: 10px;
}

and all of the DIVs get rounded corners in all IEs.

Original comment by bora...@gmail.com on 16 Mar 2011 at 5:21