CSS PIE: CSS3 styles for IE – easy to use and awesome

CSS PIE: CSS3 styles for IE – easy to use and awesome

Flash back to…

A little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It basically does the same thing, only more. If you use things like box-shadow, linear-gradients, AND border-radius, then this is the version you will want to use. Basically the same call in the css file:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
behavior: url(/PIE.htc);
}

The last line there is the obvious call to the htc file you have to download, which you can get here.

A couple things to note:
1) Again, like the other one I talked about, the htc file is relative to the html file, NOT the css file. So either make it absolute from the domain root, OR, relative to the html file.
2) There are issues with static positioning and background images, which you can also read about here (I had to find this out the hard way with the other version I used). Easy solution is to make the target have position set to relative.

Other than that, this works like a charm. Works on IE6-8.

Conclusion

Usually I am not so into these types of things because you have to add a script to make it work. Not so here, and I see no reason for not implementing this in all of my projects. All you have to do is upload the file to your server, and you are done. Well other than making all the behavior calls to it in the CSS file.

Coupon Code: webmachine

jQuery junkBox

$.merge();
This will merge the contents of two arrays together into the first array. So below, the two variables will be merged together, but uses a copy, so the original isn’t altered. You will get: ['Rocky', 'Better Off Dead', 'The Last Samurai', 'Goonies', 'Hangover', '40 Year Old Virgin']

var myMovies1 = ['Rocky','Better Off Dead','The Last Samurai'];
var myMovies2 = ['Goonies','Hangover','40 Year Old Virgin'];
$.merge( $.merge([],myMovies1), myMovies2);

Tags: ,

Leave a Reply