HTML Remix - Dont copy code, remix it!

December 6, 2009

CSS level 3 styles in Internet Explorer 6 onwards

Posted by : Remiz
Filed under : Programming

As web developers, we all hate Internet explorer to an extant. But in my earlier post, I wrote why not to hate Microsoft and IE. It is the people who use out dated software (IE6 is almost ten years old) and try to run our CSS3 level high Ajax’s web 2.0 designs.

border-radius

Last year, I published an htc file, which makes Internet explorer 6 to have rounded corner DIVs. For other modern browsers, we can have border-radius CSS property. For mozilla, you need to prefix -moz- and for webkit based browsers (Safar, Chrome) prefix -webkit- . SO the CSS for a DIV with rounded edges will have following styles.
.curved { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

As IE wont support these CSS properties, you will have to add one more line of css and an HTC file. Here is more explanation how to make rounded corner divs in IE.

Good news : Microsoft’s Internet Explorer 9 is expected to support border-radius property.

Early this month, Nick Fetchak of fetchak.com sent me a new htc file with support for IE5 to IE8 which is amazing and working well. You can find the latest version that file here.

box-shadow

Box shadow is another simply amazing CSS3 property, which is unimaginable to work in IE. It works on Safari 3+ and Firefox 3.1 onwards and Google Chrome. I am not aware of Opera this time. So what you think about making this work on IE6 ? No kidding..

CSS for box-shadow is:
box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;

For older version of Firefox, you might have to add -moz- and for Safari and Chrome, try -webkit- as prefix. (My Chrome is already supporting without any prefix).

So, here what you need for IE to make box-shadow.

behavior: url(box-shadow.htc);

Download the htc file here or Demo here. The project is hosted on Google code.


Incoming search terms:

ie-css3 htc not working, ie-css3 htc demo, ie6 border radius filter, border-radius htc not working, border-radius htc not working in ie, ie-css3 htc download

Remiz

Remixed version of unstable human emotions and thirst of mankind actions. UX designer, UI developer and HE of WebCastle Media Pvt LTD

More Posts - Twitter - Facebook


25 Responses to “CSS level 3 styles in Internet Explorer 6 onwards”

  1. [...] border-radius.htc for CSS3 styles in Internet Explorer 6, more about that here [...]

  2. eVolution says:

    I also had problems when combining this fix when using AJAX to load HTML/CSS, fine in every browser excet IE where I got a debug error. going to out a sad work around for IE elements but wont look as cool as everything else – apart from that I love the idea and implementation :@)

Leave a Reply


five + 7 =

More in Programming (4 of 8 articles)