0

I Googled this but couldn't find a solution. I'm applying corner-radius to my divs but IE9 doesn't show the effect.

CSS:

.ipleft {
width: 512px;
height:300px;
-webkit-border-radius: 10px 0px 0px 10px;
-khtml-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
background-image: url(images/ipleft.png);
float: left;}

.ipright {
width: 512px;
position: relative;
height:300px;
-webkit-border-radius: 0px 10px 10px 0px;
-khtml-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;
background-image: url(images/ipright.png);
float: right;}

I added the appropriate meta tag and it's still not working! The site is www.campusonsale.com. If you take a look with FF the rounded corners are applied without a problem, but IE9 is showing rectangular corners!

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
user1048389
  • 11
  • 1
  • 1
  • 4
  • take a look at css3pie.com It's progressive internet explorer, you can use newer css techniques with IE using an htc file. – James Nov 15 '11 at 20:09
  • possible duplicate of [ie9 border radius](http://stackoverflow.com/questions/5381446/ie9-border-radius) -- you probably need to add the right doctype to your HTML file. – Blazemonger Nov 15 '11 at 20:11
  • @James the new IE9 supports border-radius so this should work – Peter Stuart Nov 15 '11 at 20:11

4 Answers4

4

Your website is being displayed in quirks mode. This is because you have some content (<script> element) before <!doctype>. In quirks mode, IE uses rendering similar to IE5 and thus border-radius doesn't work.

duri
  • 14,991
  • 3
  • 44
  • 49
1

I could be that you need to add this meta tag: <meta http-equiv="X-UA-Compatible" content="IE=edge" />

This will tell IE to use the latest rendering engine available to it, meaning the border-radius should render. This only applies to IE9 and later, of course.

Steve Adams
  • 2,812
  • 22
  • 29
0

IE switches to quirks mode on your page and that's why corners does not work. I think it's because script tag before doctype, but you should use validator to eliminate all possible reasons.

DzikiMarian
  • 423
  • 3
  • 14
0

I would try this. it worked for me:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
Peter Stuart
  • 2,362
  • 7
  • 42
  • 73