CSS3 PIE - Giving IE border-radius support not working?

Question

I am trying to make rounded corners in IE with the CSS3 PIE attached behavior.

Here is my CSS:

.fieldRow {
    clear:both;
    padding: 0;
    margin         


        

Answer 1

A solution that works for me is as follows:

1. The path to PIE.htc needs to be absolute e.g. behavior: url(App_Themes/Default/PIE.htc)
2. Make sure the div that you set the behavior in has a style of Position: Relative

Dan

Answer 2

The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour. The PIE.php you use should fix this. If you are not sure if this is the case, use FireBug's Net feature to check a direct request to the file.

Also note that the path to PIE.htc is relative TO THE HTML PAGE - not relative to the css file which you would expect. So consider making the path to the .htc absolute. Here FireBug can help you again to detect if you have a 404 issue.

More info at http://css3pie.com/documentation/known-issues/

Answer 3

Also worth noting - I had an issue where rounded corners were not working in lte IE8 when I'd set a background color with an !important rule after it. Another reason not to use !important!

Answer 4

Neophyte's answer here (to use a conditional comment in the head section) helped me out when everything else seemed fine / did not make a difference (on the simplest of test pages, from IIS 7 with IE8)

http://www.webmasterworld.com/forum83/9144.htm

Hope that helps someone

Answer 5

The problem may be in your path, depending on where you put the PIE.htc file. Note that Pie's 'getting started' documentation (here) mentions the following:

...you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

So behavior: url(PIE.htc); should work if the PIE.htc file is in the same folder as your html file (at least, it worked for me :-) ).

However, not sure what you want to see rounded... the div that would be affected doesn't seem to have any visible features. If you want to see the div with rounded corners, you might want to make the border or background visible, such as adding border: 1px solid black; or background-color: someColor; to the fieldrow class.

If you want to see the input field rounded, you might want to declare the class as .fieldRow input {...}

Answer 6

Try adding a position: relative into you css statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/