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. Marcelo Mira says:

    Hello!.. since i’m having some problem after using it with AJAX, bourder radius div doesn’t shows untill i resize the window, i’d like to know if is there any way to manually refresh at the ajax success event. Sorry about my english, i speak spanish.

    • Remiz says:

      Sure, there is no support for ajax at the moment because the svg are created while page is loaded. Keep watching for an update.

  2. tarim says:

    Hi,

    It did not support one or two corners. Any idea?

    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;

    Thanks,

  3. Jean says:

    Thanks for this great work. But I discovered a problem when using the behavior combined with a filter:…gradient(..).
    I use this css technique to generate nice Input Buttons in Forms. In other modern browsers I’d give it a gradient background and a rounded border-radius and it looks great.
    Now, using this htc file is working very good for me. I can generate the rounded borders. With the IE filter css property I can also add gradient backgrounds. But those filters always paint above the rounded corners.
    Is there a way to get the disired look without using gradient background images?

    Best Regards

  4. bodomias says:

    Hi, great post. It’s a nice solution in small developements. I’ve tried the ‘.htc method’ and I found these problems:

    - It doesn’t work in chrome correctly.
    - It doesn’t support background-repeat or background-position as well.
    - Cannot set borders separately.
    - Serious problems with asyncronous calls in jQuery 1.4.
    - In the long term, it makes trouble in large developements with a lot of code.

    Regards.

  5. Marcello says:

    @Gabriel Memmel
    Great fix!
    I hope someone else could fix the involontary background-repeat… :-)

  6. What steps will reproduce the problem?
    1. Use JqueryUI theme
    2. Apply behavior to a jqueryui class
    3. See that the elements of jquery just disappear…:(

    What is the expected output? What do you see instead?

    The output will be the invisible elements!

    What version of the product are you using? On what operating system?
    I am using the version downloaded from here…

    Please provide any additional information below.

    I am using the JqueryUI theme for a project, and I want to have the
    -moz-border-radius behavior for IE and use your ie-css3.htc in order to do
    this, but if I apply the behavior: ie-css3.htc to a class of jqueryui it
    make the element invisible, and don’t know what it’s causing the
    problem….Please help me out…

    Check the attach PrtScr to see the jquery elements

    I put the behavior to a different class which is not jquery and it’s okay
    despite the fact that it’s duplicating the background inside the .blueBox
    (it’s the name class that I attach here: )
    /*********************************************/
    .blueBox{
    background: #eff7ff url(“/media/images/apps/core/admin/green/info.png”)
    no-repeat left;
    padding-left: 15px;
    border: 1px solid #b5ceee;
    margin-top: 10px;
    margin-bottom: 10px;
    width:400px;
    -moz-border-radius:10px;
    behavior: url(/media/js/jquery/ie-css3.htc);
    }
    /*********************************************/
    Shot at 2010-06-03

    http://yfrog.com/j3jquerydropdownj

    Shot at 2010-06-03

    http://yfrog.com/jyjquerydialogj

    Shot at 2010-06-03

    http://yfrog.com/2pblueboxj

  7. Elijah says:

    Thanks ! good post..

  8. Gabriel Memmel says:

    Hello, is very good tool, about the color of the shadow, I solved that problem with some small modifications, I’m sending to you to upgrade

    file: ie-css3.htc

    1- Replace:

    var match = style.match(/^(\d+)px (\d+)px (\d+)px/);

    to:

    var match = style.match(/^(\d+)px (\d+)px (\d+)px (#[a-f0-9]{3,6}|[a-z]+)?/i);

    2- Add (line 56):

    sh_color = RegExp.$4;

    3- Replace:

    shadow.style.filter = ‘progid:DXImageTransform.Microsoft.Blur(pixelRadius=’+

    shadow.userAttrs.radius +’,makeShadow=true,shadowOpacity=1)’;

    to

    shadow.style.filter = ‘progid:DXImageTransform.Microsoft.Blur(pixelRadius=’+

    shadow.userAttrs.radius +’,makeShadow=false,shadowOpacity=1)’;

    4- Add (line 83):

    var sh_fill = document.createElement(‘v:fill’);
    sh_fill.color = sh_color;
    sh_fill.className = ‘vml_box_shadow_fill’;
    sh_fill.type = ’tile’;
    shadow.appendChild(sh_fill);

    excuse my English (google translator), I speak Spanish.

  9. Eve Spear says:

    Thanks for sharing. Its have really help me a lot.

  10. Bill Horsman says:

    @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

  11. Craig says:

    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.

  12. Craig says:

    Does this support using the styles on and ??

    I can’t get it to work for dynamic drop-down in IE6.

  13. [...] Download the htc file here or Demo here. The project is hosted on Google code. via htmlremix.com [...]

  14. 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.

  15. Peter says:

    Will the htc script work for border radius top right and others or just border-radius;

  16. gaurish says:

    hi…
    not working in google chrome…

  17. deadman says:

    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.

  18. Dragon says:

    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.

  19. Ben Chapman says:

    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

  20. Evan Byrne says:

    This is great man, thanks for sharing!

Leave a Reply


+ 3 = five

More in Programming (4 of 8 articles)