SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: z-index problem

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    z-index problem

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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
    Last edited by Paul O'B; Sep 27, 2004 at 00:33.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Paul,

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

    Tauren

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One last issue...

    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

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Never mind...

    Sorry, please ignore that last message. This isn't an issue. It is working just fine.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad it helped


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •