CODEWITHSUNDEEP
internet-explorercss
Garrett
Garrett

Reputation: 11725

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!

Upvotes: 11

Views: 38627

Answers (7)

Dan
Dan

Reputation: 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

Upvotes: 0

Dan
Dan

Reputation: 5986

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!

Upvotes: 1

MemeDeveloper
MemeDeveloper

Reputation: 6782

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

Upvotes: 1

Daniel Rehner
Daniel Rehner

Reputation: 1781

Try adding

position:relative;
z-index: 0;

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

Upvotes: 8

mawtex
mawtex

Reputation: 1564

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/

Upvotes: 12

simnom
simnom

Reputation: 2620

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/

Upvotes: 12

Mike C
Mike C

Reputation: 3117

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 {...}

Upvotes: 2

Related Questions