Z-index problem in IE

[vinayhk]

Hi,

Following is my code,

									<div class="help_msg_cont" style="z-index:1005;">
										<input type="radio"  name="codeType" value="advanced"  id="codeAdv" /><label>Advanced</label><span class="info"></span>
										<div class="tooltip curve_border" ><span class="arrow"></span>
											<strong>Note</strong>
											<ul>
												<li>Simple to implement, just copy and paste</li>
												<li>One ad per page.</li>
												<li>Limit facility to share additional imformation to improve Ad performance</li>
											</ul>
										</div>
									</div>
									<div class="help_msg_cont">
										<input type="radio"  name="codeType" value="advanced"  id="codeAdv" /><label>Advanced</label><span class="info"></span>
										<div class="tooltip curve_border"><span class="arrow"></span>
											<strong>Note</strong>
											<ul>
												<li>Simple to implement, just copy and paste2</li>
												<li>One ad per page2.</li>
												
											</ul>
										</div>
									</div>

.help_msg_cont{
	position:relative;
	z-index:1000;
}
.tooltip{
	width:25em;
	padding:.5em 1em;
	background:#f5f8fd;
	border:1px solid #b1c8d6;
	position:absolute;
	top:-25px;
	left:2em;
	z-index:1001;
}

Problem is relatively positioned div is overlapping absolutely placed div, even though A.P. div has higher z-index. i think problem is because ie assign higher z-index value for R.P div. Is there is any solution for this. following is screen shot.

Link: http://www.freeimagehosting.net/uploads/137e472ef9.gif

[monicasaha]

could not understood A.P. and R.P

[vinayhk]

could not understood A.P. and R.P

R.P -- relative position

A.P -- absolute position

[monicasaha]

.help_msg_cont{
position:relative;
z-index:0;
}
.tooltip{
width:25em;
padding:.5em 1em;
background:#f5f8fd;
border:1px solid #b1c8d6;
position:absolute;
top:0px;
left:2em;
z-index:2;
}

<div class="help_msg_cont">
										<input type="radio"  name="codeType" value="advanced"  id="codeAdv" /><label>Advanced</label><span class="info"></span>
										<div class="tooltip" ><span class="arrow"></span>
											<strong>Note</strong>
											<ul>
												<li>Simple to implement, just copy and paste</li>
												<li>One ad per page.</li>
												<li>Limit facility to share additional imformation to improve Ad performance</li>
											</ul>
										</div> 
									</div>
									<div class="help_msg_cont">
										<input type="radio"  name="codeType" value="advanced"  id="codeAdv" /><label>Advanced</label><span class="info"></span>
										<div class="tooltip"><span class="arrow"></span>
											<strong>Note</strong>
											<ul>
												<li>Simple to implement, just copy and paste2</li>
												<li>One ad per page2.</li>
												
											</ul>
										</div>
									</div>

i have done something.. not sure about ur problem.. just go through it.

[jscheuer1]

Hard to tell from just that, but I see two things:

1. You have two elements with an id of 'codeAdv'. Technically, only one element per page is allowed to have any given id. When scripts are involved, there can be real problems.
   
2. Your inline style:
   

   <div class="help_msg_cont" style="z-index:1005;">

   sets a higher index than used by pop ups, so could be an issue, try getting rid of it.

But these are just educated guesses. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[monicasaha]

yes i have overlooked that .. single page wont allow 2 same id..

[vinayhk]

Hard to tell from just that, but I see two things:

1. You have two elements with an id of 'codeAdv'. Technically, only one element per page is allowed to have any given id. When scripts are involved, there can be real problems.
   
2. Your inline style:
   

   <div class="help_msg_cont" style="z-index:1005;">

   sets a higher index than used by pop ups, so could be an issue, try getting rid of it.

But these are just educated guesses. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Thanks for your reply. It actually solve my problem. Can u tell me what exactly the problem in IE, is there is any other solution for this.

[jscheuer1]

Um, I'm not clear on which of the two things I mentioned fixed it or if both did. The first is only really an issue if a script needs to find the element with that id. In most browsers these days, it will stop when it finds the first one. But this is error correction. In IE it throws the error and (in most cases) stops further script processing, at least for the code thread it was on when it encountered this.

The second issue is simply interpretation of z-index, its behavior during inheritance and nesting. If one element has a higher z-index than another, it will cover the lower z-index element. Nesting and inheritance of this property may or may not be documented in the standards. But whether or not they are, clearly there are some browser differences. If you need the higher z-index on the one element (the one that had the inline style) for some other reason, you must raise the z-index on the one that is getting undesirably covered.