Overlaying div works in Chrome and FF but not IE?

Question

I'm having trouble overlaying two divs over an image. My goal is to make a simple lightbox and when the user moves the mouse over to the right or left hand side of the lightbox I want the mouse to become a pointer and for left and right arrows to display. Here's my code:

HTML:

<div class="container">
    <img src="http://dummyimage.com/600x600/000/fff.jpg">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

CSS:

.container {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px;
        background-color: lightgrey;
        z-index: 10000;
}

.left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.left:hover {
        background: rgba(248, 248, 248, 0) left center no-repeat url("http://imageshack.com/a/img823/9885/bsux.png");
}

.right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.right:hover {
        background: rgba(248, 248, 248, 0) right center no-repeat url("http://imageshack.com/a/img845/5814/75r3.png");
}

JSFIDDLE: Fiddle

As you can see, it works great in Chrome and FF, but I can't get it to work for some reason in IE. Note that if you remove the image, it works, but it won't work with the image there.

What's the issue and how do I fix it?

Try this format `background: rgba(248, 248, 248, 0) url("http://imageshack.com/a/img823/9885/bsux.png") left center no-repeat;` and also in which IE doesn't work? — Milan and Friends, Dec 12 '13 at 23:00
@mdesdev That' didn't make a difference, unfortunately. I'm running IE 10 — Nate, Dec 12 '13 at 23:08
Ok...1st remove z-index from `.container` and add `.container img { position: relative; z-index: 100; }` 2nd add `border: 1px solid transparent;` to `.left` & `.right` and 3rd instead of `rgba(248,248,248,0)` you can use `transparent`. This should fix the problem a little, it's still not great in IE but working. — Milan and Friends, Dec 12 '13 at 23:24

score 1 · Accepted Answer · answered Dec 12 '13 at 23:22

I think this is some sort of archaic IE bug, but if you do not have a background-color set for the .left element it will not recognize the .left:hover condition. Try adding a transparent default color to .left.

background-color: rgba(248, 248, 248, 0);

EDIT: Working fiddle, http://jsfiddle.net/fEy9a/9/

Overlaying div works in Chrome and FF but not IE?

1 Answers1