CSS3 Pie .htc file

HTML & CSS
1

Hi,
I’ve just downloaded the .htc files from CSS3 Pie and want to attach them to my pages. As it’s not javaScript (but contains some) and isn’t CSS, I am not quite sure how to link it in.

Can anyone tell me how, please.

2

have you tried this? :slight_smile:

3

If you haven’t identified, this is the line you are looking for:

behavior: url(path/to/PIE.htc);
4

Hahahaha, great idea (the pie thing).

I have run into trouble with conflicts in IE when using a script for everyone else and then an .htc for IE though.

5

So, let’s see if I’ve got this (sorry to appear so slow).

I upload the .htc file to the server (apparently anywhere)
and I put this in the <head>

behavior: url(path/to/PIE.htc);

Can anyone confirm this, please.
Thanks

6

no, you put

behavior: url(path/to/PIE.htc);

in your CSS file, in that CSS rule regarding your CSS3 feat.

Step 4: Apply PIE

In that same CSS rule, add the following style line:

behavior: url(path/to/PIE.htc);
Of course 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.

like this:

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(css/PIE.htc);
}

at least, that’s my understanding. i’m not using it :slight_smile:

7

noonnope

I’ll give it a try.
Thanks for taking the time.

8

you’re welcome. hope it helps :slight_smile:

you can also find interesting and clarifying stuff about "behaviour: " here.

9

noonope’s got it right about where the path/to/PIE goes: in the CSS.

I upload the .htc file to the server (apparently anywhere)

The places I’ve gotten my .htc files, I was told to put them in the site root. However I’m thinking they only said this so that the CSS code they provided matched. You can put it anywhere you want, so long as the url correctly points to it (from the HTML sheet!).

The .htc file I used was peterned’s csshover.htc, and I mentioned it in the body CSS (and separately from other body CSS! This mattered!):

/css sheet/
body {
all my normal body stuff;
}

body {
behavior: url(csshover.htc);
}

(in this case, the .htc file was in the same folder as my HTML, so there was no path).

If the goal of this PIE is to get IE to work with lots of CSS3, then putting it on the body element might be better than on individual elements… but I’m not sure (never used this). Peterned’s htc makes IE6 hover on things which aren’t links, so putting it in the body made it affect the whole page.