Search code examples
cssrgba

Internet explorer and mozilla rgba css3 problem

I have this css style:

    background:#000;
    background:rgba(0,0,0,0.7);
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);   /* IE6 & 7 */      
    zoom: 1;

It works great in internet explorer, but i have to keep the background: transparent; style. If i keep it, mozilla makes my background transparent

Any ideeas?

Solution

  • Learn to deal with IE quirks using IE Conditionals:

    http://www.quirksmode.org/css/condcom.html

    <style type="text/css">
.stuff {
  background:#000;
  background:rgba(0,0,0,0.7);
}
</style>

<!--[if IE]>
<style type="text/css">
.stuff {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);   /* IE6 & 7 */
  zoom: 1;
}
</style>
<![endif]-->

<div class="stuff">Stuff</div>

    jsfiddle demo: http://jsfiddle.net/cYtKJ/1/

    EDIT

    You could also use it to import different style files:

    <link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css">
<![endif]-->

    You just have to be careful to put the style-ie.css last if it's overriding other css commands.