CSS - I'm A Z-index Moron! Please Help...

hi,

i've been reading extensively about the z-index issue that IE 7 suffers from (when using the "position" property) but i cannot for the life of me fix my problem.


Basically i have a #menu that is positioned relative to a #wrapper. The dropdown menu works fine in all browsers except that in IE 7, the grey shadow that should appear behind the dropdown menu itself appears on top of the actual dropdown menu.

If you view the same page using Firefox, the dropdown menu appears above the grey shadow as it should do. This is the EXACT behaviour i need. I need the dropdown menu and its shadow to appear above the "#content .box" below it, but i also need the shadow to appear behind the dropdown menu. I just need to replicate this exact behaviour you see in Firefox in IE 7.

I need to keep the IE7 compatibility mode and the DOCTYPE as they are otherwise the other styles on my site will be affected.

Please find the attached folder with all necessary code contained in it. Ignore the jquery.js file as its merely used for effects and is not causing the issue.


BTW: its essential that the #menu is positioned relative to the #wrapper as i want it to appear further down in the HTML code for SEO purposes.

Thanks in advance

I am not sure why this is not working but I am trying to nest a div and overlay them.

Code:

<style>
.txtImg {
 posistion: relative;
 z-index: 99;
 height: 72px;
 width: 100%;
 background: url(../../images/roycity-gpl-01.png) no-repeat left;
}

.logo {
 position: relative;
 z-index: 1;
 height: 72px;
 width: 100%;
 background: no-repeat right;
}
</style>
<div id="txt" class="txtImg" align="left">
 <div id="bg-img" class="logo" align="right"></div>
</div>

An old site, http://www.naausa.org, doesn't work properly in IE7 as the hover links don't go over the changing image. It seems to be because of the IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

The site and code is ugly (inline CSS, tables, etc.), but I don't want to reinvent the wheel; I just want to solve the problem and get it over with. I've tried several things with no luck. Can anyone take a gander at the source code and give me a hint?

Thanks,
Jeremy

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?

Does IE not support z-index attributes? I set some z-indexes and it seems to have fixed my issues in firefox, but not in IE.

Hi all, I've got a little request. Does anybody know how I could solve this issue:

I want to have a menu hover on the left, and a menu hover at the top, while visitors can move the google map around in the background.

I do this by setting my map div to z-index: -1, and it works good. Except it won't let people click on the map and move it around, even though there isn't a div ontop of it.

http://pw.mmogm.com/0.0.5/frame.html

The only other way I can think of it set the menu's to z-index: 1, but that would cause them to lag, and they're position would be fixed so when I "toggle" the menu, the top menu won't slide left. It's much nicer the first way, besides the clicking problem.

http://pw.mmogm.com/0.0.5/frame2.html

I greatly greatly any advice you might be able to shed on this issue. Thanks in advance if you can

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 two elements. One has a z-index of 9999 and the other has 9000. Both elements are positioned. It is a modal popup window. When I open it, the element with a poistion of 9000 is on top of the one with 9999. I even checked to confirm that the z-index properties were the same once the popup completed.

What could cause this?

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.

In safari and IE it works perfect. You can see the two gifs behind the quote text, but in netscape and firefox you cannot. I tried many things and still cannot get this to work.

Can anyone help?

edit: i guess i'm not allowed to post urls but the site is at

nscadesign . ca / iidf2007 / buckley

Hi everyone.

I have a site that has a flash dropdown navigation on it. I have the navigation in a relatively positioned <div> tag so that I could absolutely position an <h2> tag "under" the navigation so that the dropdown navigation would go over the <h2> tag.

When I play with the z-index is when I have the issues. In FF it works well in the example below but not in IE. Does anyone know what I can do to remedy this?

Here's the markup ...
Code:

<div id="intwrap">
<div id="intflash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="752" height="100" id="nav" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="f/nav.swf" />
<param name="loop" value="false" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="f/nav.swf" loop="false" quality="best" wmode="transparent" bgcolor="#ffffff" width="752" height="100" name="nav" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div> <!-- end intflash -->
<div id="pdname">
<h2>Product Name</h2>
</div> <!-- end pdname -->

</div> <!-- end intwrap -->

and the css...

Code:

/* -- interior page wrap -- */

#intwrap {
position: relative;
width: 752px;
float: left;
margin: 0;
padding: 0;
}

/* -- interior flash navigation -- */

#intflash {
positin: absolute;
top: 0;
left: 0;
width: 752px;
margin: 0;
padding: 0;
z-index: 1000

/* -- detail page -- */

#pdname {
position: absolute;
top: 30px;
left: 0;
margin: 5px 0 0 0;
padding: 0;
text-align: left;
z-index: 0;
}

Any help with this would be greatly appreciated. I worked at it for quite some time without prevailing.

Thanks!

-Brian

I know there's a thread just before me on the same topic - but I've already tried the suggested solution there and still can't get this one to work.

The problem is I have is at:

www dot whitespire dot net/index2 dot php

When you re-size the page the ripple (called drop in css) should appear UNDER the main content/text box. Any suggestions would make my evening MUCH easier!

Mercy buckets.

G

I am using an image in the FOREground as a border and I can't get the DIV boxes to drop behind the image.

Here's the CSS
Code:

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	background-color: #FFFFFF;
}

#maincontainer {
       position:absolute; 
       top:0px; 
       left:0px; 
        z-index:200;  
       color:#f00; 
       background:transparent;
	
}



#header {
	position:absolute; 
	top:22px; 
	left:22px;
	color:#000; 
	border:1px 
	solid #000; 
	padding-top:5px; 
	padding-left:5px; 
	padding-right:5px; 
	width:745px; 
	height:73px; 
	background:#FFFFCC; 
	overflow: hidden;
	

}

#leftcontent {


}

#rightcontent {


}

#centercontent {

Here's the HTML
Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="newstyles.css" >
</head>
<body>

<div id="maincontainer">
<img src="mainborder.gif" height="600" width="800" alt=""></img>
<div id="header">
eat at joes
</div>
<div id="leftcontent">
eat at joes
</div>
<div id="rightcontent">
eat at joes
</div>
<div id="centercontent">
eat at joes
</div>
</div>






</body>
<html>

http://turkeybot.info/flash/play.php?id=121

When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem?

I have an image and a popover when the mouse hovers over that image. I want the popover to show under the image. My code works in IE but not firefox. I've been trying to fix this for a couple hours but with no luck. Any help is greatly appreciated

Code:

#prefButton
{
  font-size: 0.7em;
  display: inline;
  float: right;

  margin: 0.4em;
  margin-right: 1.0em;

  display: block;
  height: 30px;
  width: 30px;
  overflow: hidden;
}

#prefButton .title *
{
  display: block;
  height: 30px;
  width: 30px;
  overflow: hidden;
}

#prefButton .title .image
{
  background-image: url(pref.gif);
  background-repeat: no-repeat;
  background-position: top right;

  position: relative; 
  top: -30px;
  z-index: 15;
}

#prefPopup
{
  display: none; 
}

#prefPopup span
{
  display: block;
  margin: 0.5em 0;
}

#prefPopup.showPopup
{
  font-size: 1em;

  border-style: solid;
  border-width: 1px;

  overflow: hidden;

  position: absolute;

  width: 10.0em;
  padding: 0.5em;

  display: block;

  z-index: 10;
}


<div id="prefButton">
<span class="title"><p></p><span class="image"></span></span>
<div id="prefPopup">Some text goes here</div>
</div>