IE8 + pie.htc: adding html5shiv.js again destroys rounded corners

Question

OK, everything works fine in any other browser than in IE8. I linked pie.htc to fix rounded corner issues for IE8. Everything is working fine. Then I found some problems with html5 for IE8. This is why I used html5shiv.js. Now everything is fine, but SOME rounded corners became squares again. This happened in only one div.

All other rounded corners still look good in IE8 with pie.htc + html5shiv.js. I mean that html5shiv.js did not break.

That I tried to solve the problem with these angles, but no luck: I moved

<!--[if lt IE 9]> <script src="path/to/html5shiv.js"></script> <![endif]--> 

before loading css. In addition, I set! The important thing is to simply verify .superclass {behavior: url (/PIE.htc) ;! Position: relative importance; } which was used to fix IE8 rounded corners for this superclass.

In addition, I tried to add, using most of the combinations of 3 lines that are below:

  z-index: 1; *position:relative!important; *z-index: 1; 

but nothing helps. What else can be done? As soon as i remove

 <!--[if lt IE 9]> <script src="path/to/html5shiv.js"></script> <![endif]--> 

angles are rounded up again. Any ideas? Thanks.

Answer 1

Use conditional comments and an HTML / CSS solution to create rounded corners:

  <div class="container"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> CONTENTS GOES HERE <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div> 

Literature:

• Rounded corners using CSS and no images
• Chunky borders