IE7 does not respect z-index

css internet-explorer-8 internet-explorer-7 z-index
user48408 picture user48408 · Sep 23, 2009 · Viewed 29.4k times · Source

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? alt text

Answer

rhodesjason picture rhodesjason · Sep 23, 2009

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.

Related questions

clientHeight/clientWidth returning different values on different browsers

Properties document.body.clientHeight and document.body.clientWidth return different values on IE7, IE8 and Firefox: IE 8: document.body.clientHeight : 704 document.body.clientWidth : 1148 IE 7: document.body.clientHeight : 704 document.body.clientWidth : 1132 FireFox: document.body.clientHeight : 620 document.body.clientWidth : 1152 Why does this …

Read More
Box shadow in IE7 and IE8

I want to implement box shadows in IE7 and IE8. I have tried everything without succeeding. Here is the css that I am using to apply colored shadow to a div: .bright{ position: absolute; z-index: 1; -moz-box-shadow: 0px -3px 55px 20…

Read More
How can I set CSS only for specific IE browsers?

I have a CSS/jQuery Checkbox style script: http://jsfiddle.net/BwaCD/ The problem is, in current browsers in order for the span to float over the input, the input's position must be absolute. But in IE8 & below, the …

Read More