CSS div overlay and jQuery

Question

This is more or less a CSS question but I am using it with jQuery. OK, so basically what I have is this:

<div
  style="overflow: hidden; width: 1000px; height: 450px; background-color: rgb(0, 0, 0); position: relative;"
  id="wrapper">
    <div
      style="background-color: rgb(255, 255, 255); opacity: 0.9; top: 0pt; left: 0pt; width: 1000px; height: 450px; position: absolute; z-index: 500;"
      id="mask"></div>
    <div
      class="ui-draggable"
      style="margin: 60px auto auto; position: relative; width: 1550px; height: 340px;"
      id="test">
        <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row">
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
             ><img
                 style="width: 100px; height: 100px; position: relative;"
                 class="img"
                 src="/images/Chrysanthemum.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                 style="width: 100px; height: 100px; position: relative;"
                 class="img"
                 src="/images/Desert.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Hydrangeas.jpg"></div>
        </div>
        <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row">
            <div
               style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Jellyfish.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Koala.jpg"></div>
            <div
               style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Lighthouse.jpg"></div>
        </div>
    </div>
</div>
<div
   style="position: absolute; left: 978px; top: 223px; color: rgb(255, 255, 255);"
   id="next-btn">Next</div>
<div
   style="position: absolute; left: 8px; top: 223px; color: rgb(255, 255, 255);"
   id="prev-btn">Prev</div>

What I am doing with the mask div is trying to get it to overlay the whole wrapper. So I set its width and height to the height of the wrapper. This works fine in Firefox, Chrome and Safari.

However, in Internet Explorer it is not working. How can I make this overlay?

I tried setting the position to absolute which worked fine except one thing. There is something that is going on top of this mask. Its position is relative. I set the one on top to a z-index of 1000 and the mask to 500. However it seems there is a bug in Internet Explorer that automatically makes an absolute div be on top of everything.

Answer 1

however it seems there is a bug in ie that automatically makes an absolute div be on top of everything.

No. The problem is that Internet Explorer doesn't support the CSS3 opacity tag. You'll have to add the following style to your mask DIV to make it work in IE too:

filter: alpha(opacity=90);

Also read here and here for more tips on how to implement opacity correctly.

On a sidenote, you should use inline styles less often. It makes your code messy and hard to debug.

Answer 2

Which version of IE? at any rate you can overlay your absolute object with another absolute object, then put the relative content inside that.