0

I am trying to make my site work on ie8, what i originally had was background-color:rgba(4, 4, 4, 0.8); - this works as expected on other browsers, unfortunately ie8 does not work with this so i am using the css below instead. - does anyone know how to avoid the child element from inheriting the opacity from the parent?

many thanks in advance.

I made a fiddle but it seems to be crashing when i open it in ie8 http://jsfiddle.net/up3uusxf/2/

 <div id="overlay-modal">
      <div class="inner-modal">
        <p>Content in here</p>
      </div>
    </div> 

#overlay-modal
            {
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:black;
                filter: alpha(opacity=80);
                        opacity: 0.8; 
                z-index:999;
            }
            .inner-modal
            {
                width: 400px;
                /*height: 270px;*/
                margin: 200px auto;
                background-color: white;
            }
Sampson
  • 265,109
  • 74
  • 539
  • 565
user7167
  • 5
  • 3
  • The jsFiddle editor doesn't work in IE8. You should be able to view just the output though by going to http://jsfiddle.net/up3uusxf/2/show – gen_Eric Dec 30 '14 at 20:54
  • Possible duplicate: http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8 –  Dec 30 '14 at 20:56
  • @lgupta i saw this which is why i mentioned its for ie8, ie8 does not support rgba – user7167 Dec 30 '14 at 21:23
  • @user7167 there are some solutions there. Check the second answer, if it doesn't work use image to support ie8. –  Dec 30 '14 at 21:27

1 Answers1

2

You'll need to have your overlay be it's own container with the content outside of it for this to work.

jsfiddle example here

HTML

<div id="overlay-modal">
    <div class="inner-modal">
        <p>Content in here</p>
    </div>
    <div class="justTransparentMask"></div>
</div>

CSS

#overlay-modal {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:999;
}
.inner-modal {
    width: 400px;
    /*height: 270px;*/
    margin: 200px auto;
    background-color: white;
}
.justTransparentMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    filter: alpha(opacity=80);
            opacity: 0.8; 
}
Szymon
  • 1,281
  • 1
  • 20
  • 36
  • Hi Szymon, Thank you for your answer im a little confused by what you're trying to say. but basically, my issue is that the inner-modal becomes transparent even though i do not want to make it transparent, the only thing that should be is the overlay-modal. – user7167 Dec 30 '14 at 21:25