11

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!

Garrett
  • 11,451
  • 19
  • 85
  • 126

7 Answers7

12

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/

simnom
  • 2,590
  • 1
  • 24
  • 34
12

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/

mawtex
  • 1,564
  • 1
  • 12
  • 21
  • i don't see a request for PIE.php, but i put both PIE.php and PIE.htc in the same directory as the PHP file that is running. what could the problem be? – Garrett Aug 20 '10 at 12:48
  • it works now, but i'm getting a "Stack Overflow in Line 0" =S when i take out the css for PIE, i stop getting that error. any ideas? – Garrett Aug 20 '10 at 13:40
  • nevermind, i see that if you apply it to the same element twice (with two different classes) it causes that stack overflow. i'll limit to one :) thanks so much!!! – Garrett Aug 20 '10 at 13:42
8

Try adding

position:relative;
z-index: 0;

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

Daniel Rehner
  • 1,771
  • 12
  • 8
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 {...}

Mike C
  • 3,077
  • 22
  • 29
  • I just did as you said, as I had the two files where my CSS is located, but not in the root folder, where all the pages are, but it still does not work (tried both PIE.htc and PIE.php). – Garrett Aug 19 '10 at 14:36
  • The !important declaration seems to be messing things up a bit... if I remove that, though, the code seems to work. Also, position: relative; didn't seem to be necessary. What version of IE are you using? – Mike C Aug 19 '10 at 15:05
1

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!

Dan
  • 5,836
  • 22
  • 86
  • 140
1

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

MemeDeveloper
  • 6,457
  • 2
  • 42
  • 58
0

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

Dan
  • 1