IE7 does not respect z-index

Question

Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.

My CSS

.MyCalendar .ajax__calendar_container 
{
border:1px solid #7F9DB9; 
background-color: #ffffff; 
z-index : 1004 ;   
width:190px;
}

the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions?

Answer 1

IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.

As mentioned in this article:

http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/

try giving the calendar's parent element an even higher z-index.

Answer 2

I finally got it on top with an additional transparent background image. IE8. SASS:

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }