[RESOLVED] Can’t force DIV layer on top in IE

@ai3rulesApr 16.2008

I am having trouble forcing a layer to the top of other layers. I set the z-index etc. but it still seems to not work, in IE only that is. Firefox so far works fine and I can’t figure out what I’m missing.

Here is the page.

~~[url]~~http://israelnyc.com/testing/index.php[/url]

CSS: ~~[url]~~http://israelnyc.com/testing/css/style.css[/url]

The div I’m referring to has the text “This div should be the top layer” and in IE you can see it ends up hidden behind a div with an ID of “results” which has the text “test results”

I appreciate any help.

Israel

to post a comment

CSS

5 Comments(s) _↴

@WebJoelApr 16.2008 — #<style>

body{

font-size: 1em;

padding: 0;

margin: 0 auto;

background-color: #C3D9FF;

}

#wrapper{

width: 720px;

margin-left: -360px; /* margin-left is half value of width */

min-width: 720px;

position: relative;

left: 50%;

border: 1px solid #7799DD;

border-top: 0;

height: 600px;

padding: 0;

}

#searchForm{

position: absolute;

top: 25px;

width: 712px;

height: 120px;

padding: 4px;

background-color: #FFFFFF;

border-top: 1px solid #3664A1;

}

#searchForm #searchTerm{

height: 30px;

font-size: 1.5em;

color: #3664A1;

}

#results{

position:absolute

top: 150px;

width: 712px;

height: 441px;

border-top: 1px solid #7799DD;

padding: 4px;

background-color: #FFFFFF;

}

#navigation{

position: absolute;

top: 0;

height: 25px;

width: 720px;

}

#navigation ul{

margin: 0;

padding: 0;

float: left;

width: auto; /*width of menu*/

background-color: #C3D9FF;

}

#navigation ul li{

display: inline;

}

#navigation ul li a{

float: left;

color: #3664A1;

padding: 5px;

height: 25px;

text-decoration: none;

border-right: 1px solid #3664A1;

font-weight: bold;

}

#navigation ul li a:hover{

background-color: #E9F0F5;

}

#userAction{

width: 720px;

margin-left: -360px; /* margin-left is half value of width */

min-width: 720px;

position: absolute;

/*

* it seems IE required this to be set to

* absolute instead of relative, otherwise

* the wrapper layer would be shifted to the left.

*/

left: 50%;

border-top: 0;

top: 30px;

height: 570px;

padding: 0px;

background-color: #FFFFFF;

z-index: 2000;

}

#userActionForm label{

width: 10em;

float: left;

text-align: right;

margin-right: 0.5em;

display: block;

}

#userActionForm input, select{

color: #781351;

background: #fee3ad;

border: 1px solid #781351;

width: 148px;

}

#userActionForm .submit input{

position: relative;

left: 175px;

width: auto;

cursor: pointer; /* same as hand cursor in IE, hand is not supported in FF */

}

#userActionForm fieldset{

position: relative;

border: 1px solid #781351;

width: 25em;

left: 50%;

margin-left: -12.5em;

padding: 0 0 10px;

}

#userActionForm legend{

color: #fff;

background: #ffa20c;

border: 1px solid #781351;

padding: 2px 6px;

}

#userActionForm fieldset legend{

margin-left: 10px; /* this is a "hack" I guess, which forces FireFox to properly position the legend so it's to the left of the left border of fieldset*/

}

#search_form_auto_suggest{

position: absolute;

top: 42px;

left: 4.5px;

width: 260px;

height: 200px;

border: 1px solid #781351;

background: #FFFFFF;

z-index: 2500; background-color:red;

}

#searchForm #search_form_auto_suggest p{

}

#searchForm {position:relative; background-color:yellow; border-bottom:1px solid gray;}

#searchForm #activity_messages{

position: absolute;

top: 0;

right: 0;

border: 1px solid #781351;

border-top: 0;

border-right: 0;

height: auto;

padding: 2px;

color: #781351;

background: #fee3ad;

}

.req_field{

margin-left: 1em;

color: #990000;

}

</style>

@ai3rulesauthorApr 16.2008 — #Unless I'm missing something else you added in there, adding the red background-color doesn't help.

I forgot to mention in my initial post that the top half of the div is visible since it's in the div #searchForm, however the bottom half of the div is either cut off or hidden behind the bottom div #results.

I fixed it though by taking the div outside of the div#searchForm. I guess it can't be placed on top of the other div's in IE if it's nested in a div?

http://israelnyc.com/testing/index_new.php

@WebJoelApr 16.2008 — #The red color is only to show that it was working with the changes I made. Was it not working for you? I had it working correctly for both IE and Firefox on my computer. I changed a few declarations, and [I]added[/I] a selector. Did you use the entire "<style>....</style>" that I pasted-in? I did not highlight the minimal changes that I made, so it would be difficult to find/point them out. I just pasted the entire working STYLE. I beleive that one of the changes that I made was to make the 'parent DIV' that holds the 'z-index', be "position:relative;" which gives the 'overlapped absolute-postioned DIV' something to start from. Giving the 'relative parent' a z-index, ensures that the 'child' has it too. Z-indexing an absolute might not show if 'orphaned' (absolute can be z-index'd, but being out of the document flow maybe it needs to have a z-indexed relative parent..does that make sence??)

Anyway, -glad you found a solution

Oh and this: cursor: pointer; /* same as hand cursor in IE, [I]hand is not supported in FF[/I] */[/QUOTE] Poor Firefox! "cursor:hand;" is [I]IE-only[/I] proprietary. Actually, "cursor: pointer;" is the W3C-recommended Standard and it is IE5.x that doesn't support "pointer". The error is in IE, you make it sound as if [B]Fx[/B] (which is the Mozilla Corp. preferred abbreviation for for "Firefox", [CAP "[B]F[/B]" lowercase "[B]x[/B]"] according to their website) is the culprit here. :>

@CentauriApr 17.2008 — #The main problem here is all the unnecessary absolute positioning - absolute positioning should not be used as a general positioning scheme, but reserved for those applications where you need something to overlap, like the auto suggest box. IE will create a new stacking order on each absolute position, which can make things difficult.

The centering method of the wrapper is also flawed as the left edge dissappears off the edge of the screen on small screens - better to use auto side margins here. If the #navigation, #searchForm and #results divs are just allowed to stack naturally within the document flow, any absolutely positioned element like the auto suggest box will appear on top. First, put the box back in the #searchForm div in the html :

[CODE]		<div id="wrapper">
 <div id="navigation">
 <ul>
 <li><a href="javascript:void(0);" onclick="addUserForm()">ADD USER</a></li>
 <li><a href="javascript:void(0);">MANAGE COST CENTERS</a></li>
 </ul>
 </div>
 <div id="searchForm"> 
 <span id="activity_messages" style="display: none;"></span> 
 <input id="searchTerm" onkeyup="autoSuggest(this.value)" type="text">
 [COLOR="Red"]<div id="search_form_auto_suggest" style="">This div should be the top layer</div>[/COLOR]
 </div>
 
   <div id="results">
   test results
   </div>
 [/CODE]

and try this css :

[CODE]body{
 font-size: 1em;
 padding: 0;
 [COLOR="Red"]margin: 0;[/COLOR]
 background-color: #C3D9FF;
 }
 
 #wrapper{
 width: 720px;
 [COLOR="Red"]margin: 0 auto;[/COLOR]
 border: 1px solid #7799DD; 
 border-top: 0;
 height: 600px;
 padding: 0;
 }
 
 #searchForm{
 height: 120px;
 padding: 4px;
 background-color: #FFFFFF;
 border-top: 1px solid #3664A1;
 [COLOR="Red"]position: relative;[/COLOR]
 }
 
 #searchForm #searchTerm{
 height: 30px;
 font-size: 1.5em;
 color: #3664A1;
 }
 
 #results{
 height: 441px;
 border-top: 1px solid #7799DD;
 padding: 4px;
 background-color: #FFFFFF;
 }
 
 #navigation{
 height: [COLOR="Red"]35px[/COLOR];
 }
 #navigation ul{
 margin: 0;
 padding: 0;
 float: left;
 background-color: #C3D9FF;
 }
 
 
 #navigation ul li{
 display: inline;
 }
 
 #navigation ul li a{
 float: left;
 color: #3664A1;
 padding: 5px;
 height: 25px;
 text-decoration: none;
 border-right: 1px solid #3664A1;
 font-weight: bold;
 }
 
 #navigation ul li a:hover{
 background-color: #E9F0F5;
 }
 
 #search_form_auto_suggest{
 position: absolute;
 top: [COLOR="Red"]40px[/COLOR];
 left: 5px;
 width: 260px;
 height: 200px;
 border: 1px solid #781351;
 background: #FFFFFF; 
 background-color:red;
 }[/CODE]

The body margins are set to zero, and the wrapper gets auto side margins. The widths and absolute positions of the main elements have been removed, and the height of #navigation fixed (padding is [B]added[/B] to height). The relative position on #searchForm is to provide the reference point for the absolute positioned box inside.

@ai3rulesauthorApr 17.2008 — #.

Also in #CSS _↴

Styles per page?resizing the window messes up EVERYTHING!sliding door technique issue

Success!

Help @ai3rules spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Can’t force DIV layer on top in IE

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Can’t force DIV layer on top in IE

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴