Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 649
Garrett Avatar asked Aug 19 '10 13:08

Garrett


3 Answers

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/

like image 133
mawtex Avatar answered Nov 06 '22 16:11

mawtex


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/

like image 25
simnom Avatar answered Nov 06 '22 16:11

simnom


Try adding

position:relative;
z-index: 0;

as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10

like image 8
Daniel Rehner Avatar answered Nov 06 '22 18:11

Daniel Rehner