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

StackOverflow https://stackoverflow.com/questions/13360869

Question

OK, everything works fine in any other browser, than IE8. I've connected pie.htc to fix the problems with rounded corners for IE8. Everything works fine. Then I've found some problems with html5 for IE8. That's why I used html5shiv.js. Now everything is fine, but SOME rounded corners became squared again. It happened within only one div.

All the rest rounded corners still look good in IE8 with pie.htc + html5shiv.js. I mean html5shiv.js didn't break'em.

What I've tried to solve the problem with that corners, but with no luck: I moved 

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

up before css loads. Also, I put !important just to be sure at .superclass{ behavior: url(/PIE.htc); position:relative!important; } which was used to fix IE8 rounded corners for that superclass.

Also, I tried to add using most combinations of 3 strings that are below:

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

but nothing helps. What else could be done? Once I remove 

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

the corners are rounded again. Any ideas? Thank you.

Was it helpful?

Solution

Use conditional comments and the 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>

References:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top