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!
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/
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/
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With