Question

I have a div that I want to display as a small colored circle. I added rounded corners using the border-radius property, which of course works perfectly in Firefox, Chrome, and even IE9, but not earlier versions of IE. I am trying to use CSSPIE to render the rounded corners in earlier versions of IE. I downloaded PIE.htc and saved it in my css folder.

This is the gist of my css:

width: 25px;
height: 25px;
background-color: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
behavior: url(/PIE.htc);

However, the div is still displaying in IE7 and 8 as a red square instead of a circle. What am I doing wrong?

Answer 1

Path issue?

Replace:

behavior: url(/PIE.htc);

With:

behavior: url("PIE.htc");

Edit

From the docs:

IE interprets the URL for the behavior property relative to the source
HTML document, rather than relative to the CSS file like every other
CSS property. This makes invoking the PIE behavior inconvenient,
because the URL has to either be:

1. Absolute from the domain root — this makes the CSS not easily moveable between directories — or,
2. Relative to the HTML document — this makes the CSS not easily reusable between different HTML files.

Change your path to be relative to the HTML file rather than relative to the css file.