IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient

17,173

Solution 1

I'd recommend (to everyone ever!) using Paul Irish's technique which looks like this:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]>  <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

in your HTML.

Then in your CSS you can write things like:

#someID {
    color:lawngreen;
}

.ie6 #someID {
    color:lightgoldenrodyellow;
}

.ie8 #someID, .ie9 #someID {
    color:saddlebrown;
}

to target different IEs. It's an easy technique that solves a lot of problems (no extra HTTP requests, an negligible extra code for all browsers).

Solution 2

I lost my corners’ radius once I applied filter: progid:DXImageTransform Microsoft.gradient.... I suppose it’s a similar problem.

To solve it, I used an SVG background generated here http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

It’s simpler than it sounds. In CSS, it looks like

body.ie9 div.test  {
   border-radius:10px  
   background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz...

and lo, round corners and gradient.

$2c, *-pike

17,173

Jeffz

Updated on December 18, 2020

Comments

Jeffz over 3 years
I used filter: progid:DXImageTransform.Microsoft.gradient to get gradients for IE <9. Now, when combined with a shadow, or a different background underneath, I get box sticking out.

Is there a way to keep backwards-compatibility, without conditionals and external stylesheets?

See code:
```
.class {
    float:left; 
    border:solid 1px #AAA; 
    position:absolute; 
    z-index:1; 
    text-align:left; 
    width:350px; 
    margin: 12px 0px 0px 0px; 
    background:#FFFFFF; 
    border-radius:5px; 
    box-shadow:5px 5px 5px #BBBBBB; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#FFFFFF); 
}

<div class="class">this</div>
```
- Jeffz
  
  Stuff I use it with comes with auto-templating which makes use of any browser specific css very problematic. It is due to interfacing, (almost) all css tasks are done via wysiwyg managers. That requires working with one auto-generated css stylesheet. Anything done outside of templating engine, has to be adjusted by hand and that I cannot have. Just to wrap it up. I have to stuff all css into one all-rounder stylesheet. Pity thou that MS screwed up again - in reverse. And this IE9 was supposed to be their big comeback into world of standards. I just do not any big hooha in IE9. Lotsa marketing.
- Jeffz
  
  They cannot even make their own household work with each other nicely. Every new generation do not care for previous ones.
Jeffz about 13 years

But this is still conditionals. IE9 was supposed to be strict standards. Also my answer to Bazzz, to clarify why conditionals are out. Thank you for your time.
Jeffz about 13 years

On the other hand ... when at a second glance ... nice technique. But it would take me forever to rewrite templates - even if my boss would agree to pay for it. Thanks again for this and your time Rich.
Rich Bradshaw about 13 years

It doesn't break anything byadding the body bit, and is only a find replace away.
commonpike almost 12 years

errr, which is a dupe answer from here .. stackoverflow.com/questions/4692686/… ...sorry.
zuallauz over 11 years

This works really well, thanks! My buttons on IE9 have now got a gradient and rounded corners just like Firefox, Chrome etc.
ManicBlowfish over 11 years

Wow, nice! Best answer for sure.