Question

I’ve got a problem with a png image and a div container in IE. Basically, the bottom part of the #logo-container div is hidden by the Google Map on this site:

http://layersoflondon.org

I think it might be a z-index issue, but I’m struggling to solve it. Here is the relevant css:

div#logo-container {
margin: 0 auto; width: 900px;
z-index:999;
}

img#logo {
margin: 20px auto;
z-index: 997;   
}
#header {
background-color: black;
background-position: top left;
background-repeat: x-repeat;
height: 51px;   
width: 100%;
position: relative;
z-index: 2;
top: -9px;
margin-left: -7px;
z-index:999;

/****Shadow***/

-moz-box-shadow: 0px 3px 3px #ddddc9;
-webkit-box-shadow: 0px 3px 3px #ddddc9;
box-shadow: 0px 3px 3px #8e8b83;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=100,               Color='#8e8b83')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=100, Color='#8e8b83');


}

Answer 1

I believe the issue has to do with the “filter: none !important;” that you are applying to every element (* – that refers to all elements).

IE uses filters to make PNGs display correctly. Remove that line and we will go from there.