z-index problem

**yowzator** · Sep 26, 2004 11:54

I've put up a sample document that demonstrates a problem I'm experiencing at this URL:
http://www.tauren.com/experiments/ve...sitioning.html

This issue is related to the small orange and grey indicator icons on the page. When you roll over the icons, a tool-tip type message is supposed to pop up next to it. This works, but the message is partially hidden by the blue floated block to the right. I've played with z-index settings, but it doesn't seem to do anything in IE. Works in Mozilla just fine.

Any ideas how to get this to work in IE too?

Thanks!

**Paul O'B** · Sep 26, 2004 12:58

Hi,

Because the elements are repeated blocks then the parent z-index will define the stacking order. As the parents all have the same z-index (or no z-index) then they are rendered in order of the html (although this is not guaranteed for all browers).

Therefore each succesive block will stack on top of the previous block and all its children. You need to give each block a higer z-index than the one before in order to be on top or a lower z-index to stack underneath.

e.g.

Code:

#z1, #z2, #z3, #z4, #z5 {position:relative}
#z1 {z-index:5}
#z2 {z-index:4}
#z3 {z-index:3}
#z4 {z-index:2}
#z5 {z-index:1}

Code:

<div class="WingActive" id="TitleDetailsPrimaryBasicPane"> 
<fieldset id="z1" style="font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;">
<div class="row"> 
	<label class="TableLabel" for="artistid">Artist ID</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="artistid" name="artistid" maxlength="8" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="artistidicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('artistidindicator')" onmouseout="hideIndicator('artistidindicator')"></span><span id="artistidindicator" class="Indicator"><img id="artistidmsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="artistlongname">Artist Long Name with Extra 
	Text to Wrap Line</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="artistlongname" name="artistlongname" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="artistlongnameicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('artistlongnameindicator')" onmouseout="hideIndicator('artistlongnameindicator')"></span><span id="artistlongnameindicator" class="Indicator"><img id="artistlongnamemsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="artistshortname">Artist Short Name</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="artistshortname" name="artistshortname" onchange="return validate(this, 'present', false);">
	</div>
	<span class="IndicatorIcon"><img id="artistshortnameicon" src="http://www.tauren.com/experiments/im...tionalicon.gif" border="0" onmouseover="showIndicator('artistshortnameindicator')" onmouseout="hideIndicator('artistshortnameindicator')"></span><span id="artistshortnameindicator" class="Indicator"><img id="artistshortnamemsg" src="http://www.tauren.com/experiments/images/optional.gif" border="0"></span> 
	<br>
</div>
</fieldset>
<fieldset id="z2" >
<div class="row"> 
	<label class="TableLabel" for="groupcode">Group Code</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="groupcode" name="groupcode" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="groupcodeicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('groupcodeindicator')" onmouseout="hideIndicator('groupcodeindicator')"></span><span id="groupcodeindicator" class="Indicator"><img id="groupcodemsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="label">Label</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="label" name="label" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="labelicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('labelindicator')" onmouseout="hideIndicator('labelindicator')"></span><span id="labelindicator" class="Indicator"><img id="labelmsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
</fieldset>
<fieldset id="z3">
<div class="row"> 
	<label class="TableLabel" for="genre">Genre</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="genre" name="genre" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="genreicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('genreindicator')" onmouseout="hideIndicator('genreindicator')"></span><span id="genreindicator" class="Indicator"><img id="genremsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="titletype">Title Type</label>
	<div class="FormField"> 
	 <select class="BoxedField" id="titletype" name="titletype" onchange="return validate(this, 'present', true);">
		<option value="Internet"> Internet </option>
		<option value="Expanded"> Expanded </option>
		<option value="Regular"> Regular </option>
	 </select>
	</div>
	<span class="IndicatorIcon"><img id="titletypeicon" src="http://www.tauren.com/experiments/images/validicon.gif" border="0" onmouseover="showIndicator('titletypeindicator')" onmouseout="hideIndicator('titletypeindicator')"></span><span id="titletypeindicator" class="Indicator"><img id="titletypemsg" src="http://www.tauren.com/experiments/images/valid.gif" border="0"></span> 
</div>
</fieldset>
<fieldset id="z4">
<div class="row"> 
	<label class="TableLabel" for="streetdate">Street Date</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="streetdate" name="streetdate" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="streetdateicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('streetdateindicator')" onmouseout="hideIndicator('streetdateindicator')"></span><span id="streetdateindicator" class="Indicator"><img id="streetdatemsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="earlyshipmentflag">Early Shipment Flag</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="earlyshipmentflag" name="earlyshipmentflag" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="earlyshipmentflagicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('earlyshipmentflagindicator')" onmouseout="hideIndicator('earlyshipmentflagindicator')"></span><span id="earlyshipmentflagindicator" class="Indicator"><img id="earlyshipmentflagmsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
</fieldset>
<fieldset id="z5">
<div class="row"> 
	<label class="TableLabel" for="amcost">AM Cost</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="amcost" name="amcost" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="amcosticon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('amcostindicator')" onmouseout="hideIndicator('amcostindicator')"></span><span id="amcostindicator" class="Indicator"><img id="amcostmsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
<div class="row"> 
	<label class="TableLabel" for="msrp">MSRP</label>
	<div class="FormField"> 
	 <input class="BoxedField" id="msrp" name="msrp" onchange="return validate(this, 'present', true);">
	</div>
	<span class="IndicatorIcon"><img id="msrpicon" src="http://www.tauren.com/experiments/im...quiredicon.gif" border="0" onmouseover="showIndicator('msrpindicator')" onmouseout="hideIndicator('msrpindicator')"></span><span id="msrpindicator" class="Indicator"><img id="msrpmsg" src="http://www.tauren.com/experiments/images/required.gif" border="0"></span> 
	<br>
</div>
</fieldset>

This allows the indicator icon to overlay the following element because I have provided the later elements with a lower descending z-index order.

Paul

**yowzator** · Sep 26, 2004 18:35

Paul,

Thanks for the suggestion! It sounds like this would certainly work. I'll give it a try.

Tauren

**yowzator** · Sep 29, 2004 00:24

Paul (or anyone else),

Your suggestion worked perfect, except for that I need to change the design now. Instead of the fieldsets having no border and a solid background, they now need a 1px solid border and no background color.

Unfortunately, for some reason the border is shown on top of the indicator message rather than underneath it. Any idea why the background of the fieldset would behave differently from border of it?

Again, you can see it at this URL:
http://www.tauren.com/experiments/ve...sitioning.html

Tauren