People always hate IE because of poor support for CSS. But I am gonna make them love it by giving CSS3 support for IE6 onwards. Now IE6 supports border-radius and box-shadow.
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.
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 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.
AI is being used in programming to improve efficiency, accuracy and automation. It is being used in machine learning algorithms…
For a long time since Push notification became a thing on iOS, it was very simple to integrate push notification…
Note: A little bit of a story since I haven't been writing for a while. If you are in a…
There are few things that are quite as universally important in a business like marketing. Good marketing is at the…
Since latest iOS and macOs removed support for PPTP VPN from their built in client, here is how you can…
Back to habits of young days. Shaping up another life. Starting like a kid who is a great king.
View Comments
@Ben - I get the same problem: a heavy page causes the KB927917 problem in IE8. My only solution, so far, is to not use rounded corners on IE :( In my case, the bug was causing the page to be interrupted and part of it was missing. - Bill
Does this support using the styles on ul and li, or only div ??
I can’t get it to work for dynamic drop-downs in IE6.
Does this support using the styles on and ??
I can't get it to work for dynamic drop-down in IE6.
Ben,
I had the same problem and managed to hack/fix it by moving the CSS styles that applied the border-radius.htc file to the bottom of my page i.e. insert a block just before the tag.
Will the htc script work for border radius top right and others or just border-radius;
hi...
not working in google chrome...
Very impressive, although (as others may have pointed out) it doesn't handle cases where different corners have different rounding. It always gives all corners the same setting.
I look forward to future versions.
Thanks for this script. When I move both the external .css file (containing the reference to the .htc file) and the .htc file together out of the directory the .htm file is in, the .htc files does not work. Must the .htc file be in the same directory as the .htm file? Thanks again.
Hi. Thanks for your work on this. I have, however, found an issue that is more pronounced in IE7 but also affects IE8 if the container being styled with round edges contains a significant amount of code, in my case, a complex nested CSS dropdown menu. The border radius HTC tries to fire before the browser has finished rendering the menu code causing the error:
Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Is there some way to delay the HTC effect on complex elements until the rest of the page is fully loaded?
Regards
Ben
I had the same issue as Ben, I solved it by moving the script into the bottom of the document just above the close body tag.
Thanks for sharing... worked a treat ;)
This is great man, thanks for sharing!