Z-Index not working in IE7

Question

I had created dialogue box at the time of Delete button click.It is overlaying parent Div.

Its working in all browsers except IE 7.Here I mentioned Css for dialog box and div.

dialog_box {
width:219px;
height:100px;
background-image:url(../images/preference/popup.png); background-repeat:no-repeat;
padding:10px;
position:absolute;
right:-10px;
z-index:50;
overflow:hidden;
}

Div{
border:solid 1px #ffffff;
padding:10px;
padding-left:30px;
padding-top:10px;
padding-bottom:10px;
position:relative;
text-align:left;
}

Any idea why its happening?

Answer 1

Is the element referenced by dialog_box in the same container as Div? In IE, dealing with z-index for elements contained within the same containing block can be quirky at times. Try moving your dialog_box out to a higher-level containing block (say the body element), and see how that works. You might need to adjust your positioning, but usually putting popup divs at body level alleviates any quirky z-index/absolute positioning behavior.

Answer 2

hi, this is a common issue with IE7.

See this: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/64774ff1-1cce-4666-a2c7-9a899994aaef

Or google "IE7 z-index" and find out much more.

Answer 3

Not sure what you are going for here... I guess the DIV under dialog_box ?

It might be that you did not define a z-index for the DIV, see if giving that a 40 works.

Answer 4

It's hard without seeing the HTML, and I'm not sure how the iframe will affect this, but it seems like the same problem as this question, so Davidyn is probably right.

I've got a post on IEs z-indexing with some illustrations which might bring you closer to a solution.