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: 0;
    overflow: hidden;
    line-height:17px;
}
.alternate, .rowMousedOver {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.php);
    position: relative;
}
.rowMousedOver{
    background-color: #E2E66D !important;
}
.alternate {
    background-color: #FCFEE8;
}

and here is some sample HTML:

<div class="fieldRow alternate">
                <div class="label"><label id="title_label" for="title"> Title: </label></div>
                <div class="fieldWrapper required text">
                    <div class="cellValue"><input type="text" onchange="validateField(this)" name="title" id="title" value="Tax Free Savings Accounts" disabled=""></div>
                </div>
            </div>

and via javascript I add rowMousedOver to the fieldRow when it is hovered.

Any idea as to why this is not working? I've also tried using behavior: url(PIE.htc), but had no luck with that either.

Thanks!

Answer 1

Rounded corners are so like 24th Century...

Answer 2

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 3

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/

Answer 4

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/