3

i'm trying to get rounded corners using pie:

ul li{
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    color: #FFFFFF !important;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    margin-top: 14px;
    padding: 15px 15px 5px;
    text-align: center;
    text-decoration: none;
    background: url("../nImg/comunHomeSprite.png") no-repeat scroll -5px -4172px transparent;
    behavior: url(../nJs/pie/PIE.htc);
}

CSS file is in: /nCss/mycss.css

Html file is in: /home/html/index.html

Pie .htc+.js in: /nJs/pie/PIE.htc (and PIE.js, but i'm not sure what is the .js for)

should path be relative to .css file or to .html file?

The problem is that i'm not seing this corners to be rounded :(

-EDIT-

Even tried to host the .htc file in http://toniweb.us/recursos/PIE.htc and stills not working

what am i doing wrong?

-EDIT-

Tried with:

{
position:relative;
zoom:1;
behavior: url(http://toniweb.us/recursos/PIE.htc);
}

Not working

{
position:relative;
zoom:1;
behavior: url(/nJs/pie/PIE.htc);
}

or

{
    position:relative;
    zoom:1;
    behavior: url(../../nJs/pie/PIE.htc);
    }

Not working either :S

Note: I also downloaded this example: http://css3pie.com/demos/tabs/

And updated the path (and moved .js and .htc files) of the PIE.htc file /PIE.htc @ /pie/PIE.htc and is not working anymore.. Like is only woking when is in same path as .html, unfortunatelly that wont fit for me..

Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • Very rarely, an copy of IE might be installed without the VML libraries. Its unusual, but it does happen, and will break PIE. If you can see rounded corners in the example on the PIE homepage then this isn't the problem, but if you can't see them there either then you might have this issue. – Spudley Oct 24 '11 at 16:00
  • i can se the online example working in the website – Toni Michel Caubet Oct 24 '11 at 16:08
  • You say you're not sure what the .JS is for: it is a plain Javascript version of the same script, for people who cannot or do not want to use the `behavior` style. (perhaps they want to integrate it with other scripts?). It is also easier to debug than the .HTC version. – Spudley Oct 25 '11 at 07:42
  • 1
    In terms of resolving the issue, would you be able to use an absolute URL path rather than a relative one? I've always done it that way with PIE, and it's always worked for me. So `behavior:url(/mydir/PIE.htc);` rather than `../mydir/etc`. – Spudley Oct 25 '11 at 07:45
  • ahá. thanks for the info. I edited question with more information; actually i think tried all kind of paths.. :S – Toni Michel Caubet Oct 25 '11 at 07:56
  • @ToniMichelCaubet: this may be the reason http://stackoverflow.com/a/19376600/759452 – Adriano Jun 04 '14 at 19:24

2 Answers2

2

Right from the CSS3PIE page:

Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

That's under step 4 in getting started. http://css3pie.com/documentation/getting-started/

hradac
  • 2,431
  • 1
  • 19
  • 21
  • @Toni Try temporarily moving into the same directory as your index.html file and test to see if that works first. If that doesn't work something else is wrong. If it does work there could be some kind of access problem, maybe your web server can't find the file? But try it first just to make sure. – hradac Oct 24 '11 at 16:44
  • ok will try that just in case -tried with absolute path and stills not- – Toni Michel Caubet Oct 24 '11 at 16:48
  • with .htc in same .html folder and behavior: url(PIE.htc); is not working either :S – Toni Michel Caubet Oct 24 '11 at 16:52
  • I'm not sure but CSS3PIE might not be able to do different rounded corners. You may have to round all corners to make it work. Try `border-radius:8px` and see if that changes anything. – hradac Oct 24 '11 at 17:28
  • 1
    Yes it does look at the example on the website -posted it in the question aswell- anyway tried as you said and result is same. i'm sure the problem is in the path.. – Toni Michel Caubet Oct 25 '11 at 08:08
  • using **absolute** url for the `.htc` file path instead of relative might make it work. – Adriano Jun 04 '14 at 19:27
1

Your PIE.htc file is being served with an incorrect content-type header of text/plain. You must correct this to make IE interpret the behavior file correctly; see http://css3pie.com/documentation/known-issues/#content-type for details.

lojjic
  • 791
  • 5
  • 7