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

[ai3rules]

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.

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

CSS: http://israelnyc.com/testing/css/style.css

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

[WebJoel]

<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>

[ai3rules]

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

[WebJoel]

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 added 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, hand is not supported in FF */

Poor Firefox! "cursor:hand;" is IE-only 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 Fx (which is the Mozilla Corp. preferred abbreviation for for "Firefox", [CAP "F" lowercase "x"] according to their website) is the culprit here. :>

[Centauri]

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 :

		<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">
				<div id="search_form_auto_suggest" style="">This div should be the top layer</div>
			</div>
			
			<div id="results">
				test results
			</div>

and try this css :

body{
	font-size: 1em;
	padding: 0;
	margin: 0;
	background-color: #C3D9FF;
}

#wrapper{
	width: 720px;
	margin: 0 auto;
	border: 1px solid #7799DD; 
	border-top: 0;
	height: 600px;
	padding: 0;
}

#searchForm{
	height: 120px;
	padding: 4px;
	background-color: #FFFFFF;
	border-top: 1px solid #3664A1;
	position: relative;
}

#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: 35px;
}
#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: 40px;
	left: 5px;
	width: 260px;
	height: 200px;
	border: 1px solid #781351;
	background: #FFFFFF;	
	background-color:red;
}

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 added to height). The relative position on #searchForm is to provide the reference point for the absolute positioned box inside.

[ai3rules]

Webjoel,

I should have pasted the entire stylesheet and tested it but found my little "solution" first. I figured though it was more than just the background which you changed and I just didn't spot the other changes. I will definitely take a closer look at your fix.

Thanks for pointing out that IE/Fx cursor info since I only put that in for my own reference and have been used to using 'hand' in the past and didn't research which one was valid once I found what I thought was an Fx solution.

Centauri,

Thanks as well for that info. I was definitely curious as to what the proper method was for this layout in order to work cross-browser and on different resolutions etc.

I appreciate all your help.