CSS level 3 styles in Internet Explorer 6 onwards

View Comments

• 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 :@)

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

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

• 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,

• 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

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

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

• 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

• Thanks ! good post..

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

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