CSS - Z-index Problems

Dear all,

Please could anyone help me some issues I am having. I am having problems with an Z-index issue in IE. Please see the website at the following http:// www. pollardsprint .co . uk/PROOF/test_site/index.html

On the index.html page there is an Enquiry tab, once clicked, the form goes behind the movie.

Also on the history.html, the same thing happens, its goes behind the history timeline.

Also on the history page, the Plant List and Art work contents once clicked also go behind the timeline and the drop down navigation menu.

Please find the css for the enquiry form, navigation and History container

ENQUIRY FORM CSS

Code:

#zenbox_overlay { top:0; left:0; width: 100%; height: 100%; position: absolute; _position: absolute; z-index: 2; } #zenbox_overlay * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-variant:normal; font-size: 12px; color:#333;}    #zenbox_main { width: 670px; height: 620px; margin: 0 auto; z-index:2; position:relative; }     #zenbox_main div { padding: 5px 20px 0 20px; margin:0; background: #EEE; overflow:none; border-right: solid 2px #000; border-left: solid 2px #000; }      #zenbox_main #overlay_header {       padding: 0.5em 0.5em 4px 0.5em; background-color:#333;       font-weight: bold; height:18px; border: solid 2px #000;       border-bottom-width: 0;     }       #zenbox_main #overlay_header span {         float:right; height:20px; padding-right:20px; background: transparent url('/external/zenbox/images/close.png') no-repeat 33px 0;         text-decoration:underline; font-size:11px; cursor:pointer; color: #fff;       }      #zenbox_main #overlay_loading, #zenbox_main #zenbox_iframe {       border: solid 2px #000; border-top-width: 0;     }      #zenbox_main #overlay_loading {       font-size: 2em;       padding: 1em;       text-align: center;     }      #zenbox_iframe { width: 100%; height: 100%; z-index:2; }      #zenbox_screen { top:0; left:0; z-index:1; width: 100%; position: absolute; background-color: #000; opacity: 0.42; filter:alpha(opacity=42); -moz-opacity: 0.42;}  #zenbox_tab {   top: 33%; width: 120px; height: 84px; cursor:pointer; text-indent:-5000px;   position: fixed; z-index: 10000; overflow:hidden;       }   /* IE won't read ID-and-class selectors like #zenbox_tab.left, so we use just a class: */   .ZenboxTabLeft {     left: 0;     background-position: right 0;   }   .ZenboxTabRight {     right: 0;     background-position: left 0;   }   #zenbox_tab:hover {background-color: #444;}

NAVIGATION MENU CSS

Code:

#nav{ 	 	float:left; 	width:1000px; 	list-style:none; 	font-weight:bold; 	background:#55B947; 	padding-left:20px; 	height:45px; 	background:url(../images/nav_bg.jpg) repeat; } #nav li{ 	float:left; 	xmargin-right:10px; 	xmargin-left:20px; 	position:relative; 	display:block; 	padding-top: 10px; 	padding-right: 5px; 	border-right: 1px solid #fff; } #nav li a{ 	display:block; 	padding:5px; 	color:#fff; 	background:#55B947; 	text-decoration:none;  	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */ 	-moz-border-radius:2px; 	-webkit-border-radius:2px; 	border-radius:2px; } #nav li a:hover{ 	color:#fff; 	background:#0E3D7C; /* Solid colour fall-back */ 	background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */ 	text-decoration:underline; }  /*--- DROPDOWN ---*/ #nav ul{  	position:absolute; 	z-index:10; 	list-style:none; 	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ 	opacity:0; /* Set initial state to transparent */ 	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */ } #nav ul li{ 	position:relative; 	z-index: 99999; 	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ 	float:none; 	background:#55B947; } #nav ul a{ 	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ 	display:block; } #nav li:hover ul{ /* Display the dropdown on hover */ 	left:0; /* Bring back on-screen when needed */ 	opacity:1; /* Fade to opaque */ } #nav li:hover a{ /* Set styles for top level when dropdown is hovered */ 	background:#55B947; /* Solid colour fall-back */ 	e semi-transparent */ 	text-decoration:underline; } #nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */ 	text-decoration:none; 	-webkit-transition:-webkit-transform 0.075s linear; } #nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */ 	background:#333; /* Solid colour fall-back */ 	background:rgba(51,51,51,0.75); /* It'll look nice semi-transparent */ 	text-decoration:underline; 	-moz-transform:scale(1.05); 	-webkit-transform:scale(1.05); }

CSS CODE FOR THE HISTORY TIMELINE CONTAINER

Code:

position:relative; 	width:960px; 	text-align:center; 	margin-bottom: 30px; 	z-index:1000;

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

I'm wanting to put three items together with different z-indexes. The first div contains another div and a paragraph, all are positioned absolutely. I want the 2nd div to be higher than the p.

The html is as follows:
Code:

<div id="sticker">
<div></div>
<p>Text</p>

The css is as follows: Code:

div#sticker {width:146px; height:140px; background:url("stickerbase.png") no-repeat top left; position:absolute; top:20px; left:20px; z-index:10;}
div#sticker div {width:115px; height:67px; background:url("stickerflap.png") no-repeat top left; z-index:20;}
div#sticker p {position:absolute; top:40px; left:20px; z-index:15; background-color:#06c;}

An example is at www.wattersisere.co.uk/devshed

I want the text with the blue background to be behind the flap of the sticker!

I even tried it out with an online z-index checker and couldn't get their code to do it.

Thanks,

Watters


I worked it out, I had missed the position:absolute off the 2nd div.

Hi,

I am trying to position a logo at the foot of http://www.root.lamtha2.co.uk/cssproblem/

If you look at the source it shows,

<div id="footer" class="navTextBottom">
<br />
<!-- #BeginLibraryItem "/Library/bottom_nav_bar.lbi" --><a href="index.html">Home</a> | <a href="#">Terms & Conditions</a> | <a href="#">Links</a> | <a href="#">Contact Us</a><!-- #EndLibraryItem --><br />
<span class="copyrightText">Copyright Apex Verhicle Rentals 2006</span><br />

<div id="lamtha2logo"><a href="http://www.lamtha2.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lamtha2logo','','index_images/designed_by_l2_on.jpg',1)"><img src="index_images/designed_by_l2_off.jpg" alt="Lamtha2 Web Design" name="Lamtha2logo" width="89" height="29" border="0" id="Lamtha2logo" /></a> </div>
<!-- end lamtha2logo -->

</div> <!-- end footer -->

Here is the css


#footer {
width:760px;
font-size:12px;
background-image: url(index_images/footer.gif);
text-align: center;
background-repeat: no-repeat;
z-index: -2;


}

#lamtha2logo {
height: 29px;
width: 89px;
background-repeat: no-repeat;
z-index: 2;
float: left;
padding-left: 10px;
margin-bottom: -35px;

}

Can anyone help me resolve why div #lamtha2logo is beneath div #footer

thanks

I have an object on my page with the following
settings:

Code:

 #myEmail {
                position:absolute;
                left:400px; 
                top:50px;
                z-index:2;
                display:none;
 }

and i have a video player in my form that looks like this:

Code:

<object id="Player" height="400" style="border:solid 1px black; z-index:1;" width="500" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
           <param name="URL" value="<% =GetPlayerUrl() %>" />
           <param name="autoPlay" value="true" />
        </object>

Problem is, when the video starts to play, it moves to the top layer. What am i doing wrong?