Css3 Pie and making behaviours behave

I’ve always avoided behaviours in my css files because they have always seemed to cause me so many more problems than they solved. In the past its been referencing the path to the htc or differences when setting the website live that caused me all kinds of headaches. However after coming across the excellent Css3 Pie its hard not to use it for certain fixes. So i thought I’d post a quick few tips to help you troubleshoot the problems and let you have your pie and eat it. No matter what PIE.htc has no effect in ie? First of all check that the file is even being downloaded, alright I’m sure this is pretty obvious but you’d be surprised how many times you can overlook the simple things. You can check its there by using the internet explorer developer tools. Hit F12 on your keyboard and a dialog box will open click the network tab and start capturing and then refresh the page you should see all the assets that the website downloads. Any that aren’t available should show up with a 404 marked in red. Check that PIE.htc is even listed and that its being downloaded and check the path its loading from. Its not being downloaded This one has always confused me but the url used in the behaviour is not relative to the css file its relative to the html document being loaded. So for instance you might normally reference an image like this where you have your css in a folder and you want to go back a directory and then into the img directory to find the background.jpg.

#test {
       background-image:url(../img/background.jpg);
}

However if you are using a behaviour doing something like above will not work. Instead I find it best to put the behaviour in the root of the website. So its located at http://www.mywebsite.com/PIE.htc and then tell the css url to be /PIE.htc or just PIE.htc

#test {
       behavior:url(/PIE.htc);
}
    
#test2 {
       behavior:url(PIE.htc);
}

Ok its there and being downloaded but still its having no effect If it is being loaded but still seems to be having no effect you might want to create a .htaccess file for your website with the following

AddType text/x-component   htc

Recently a web server i was using was requesting the PIE.htc file as text/html which caused it not to work. Adding the line above to a htaccess file forced the mimetype of the .htc file to be text/x-component which allows it to execute. If for some reason this also does not work i believe css3 pie now also comes with a php file that will help serve the file up with the right headers. Check the download files for PIE.php and you should use it just like the htc file

#test {
       behavior:url(PIE.php);
}