image positioning with css in ie7 and ie6

Question

I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png . I'm trying to make all images stay behind the black image with the log-in screen in front of everything.

CSS

CSS for images

img
{

    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    border: 1px solid #ccc;
    float: left;
    background-color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    z-index:0;
}

CSS for black background

element.style {

    height: 1843px;
    left: 0;
    position: fixed;
    top: 0;
    width: 1263px;
    z-index: 10000;
}

.modalBackground {

    background-color: #000000;
    opacity: 0.5;
}

CSS for Log-in Screen

element.style {

    display: block;
    margin-left: -225px;
    margin-top: -212px;
}

.pagepopups .popup {

    -moz-border-radius: 5px 5px 5px 5px;
    -moz-box-shadow: 0 0 3px #333333;
    background-color: #006699;
    display: none;
    left: 50%;
    padding: 11px 10px;
    position: absolute;
    top: 50%;
    z-index: 10001;
}

Answer 1

Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.

Answer 2

You failed to make the image fully anonymous ( Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.

Testing only in IE7:

• Add to .header a single rule: z-index: 10000 .
• That's it fixed in IE7.
• It will probably also be fixed in IE6, but if not, let me know and I'll take a look.

You're lucky you didn't anonymise it properly :)