CODEWITHSUNDEEP
cssinternet-explorer-9
Jeffz
Jeffz

Reputation: 2105

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

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>

Upvotes: 12

Views: 17296

Answers (3)

steve
steve

Reputation: 93

I find when IE is giving me issues with stuff pushing out of the round corners, I nest that inside another element...

So for example I would put the round corners and drop shadow on the outer element with the size I want and overflow: hidden; Then put the gradient on another element inside. 100% fit.

maybe not the perfect solution, but fairly simple.

Upvotes: 0

commonpike
commonpike

Reputation: 11185

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

Upvotes: 9

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

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

Upvotes: 14

Related Questions