✔ Z-Index Bug Internet Explorer

[fortyniner]

Hallo,

wie kann ich auf der folgenen Seite den Z-Index Bug beheben? Die Navigationsleiste wird nicht richtig angezeigt.

Ich habe schon allen Elementen der Bildergalerie einen z-Index gegeben.

Ich glaube das Problem liegt daran, dass dem container mit dem angezeigten Bild kein z-index zugeordnet ist.

http://www.drhorvath.de/galleria.html

.demo{
	position:relative;


	margin-top:2em;
	left: -40px;
	z-index: 1;
	visibility: visible;
}
.galleria{
	list-style:none;
	width:200px;
	z-index: 4;
}
.galleria li{
	display:block;
	width:65px;
	height:65px;
	overflow:hidden;
	float:left;
	border:3px double #eee;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	z-index: 2;
}
.galleria li.hover{
	border-color:#bbb;
	z-index: 3;
}
.galleria li.active{
	border-style:solid;
	border-color:#222;
	z-index: 4;
}
.galleria li a{
	display:none;
	z-index: 4;
}
.galleria li div{
	position:absolute;
	display:none;
	top:0;
	left:180px;
	z-index: 5;
}
.galleria li div img{
	cursor:pointer;
	z-index: 4;
}
.galleria li.active div img,.galleria li.active div{
	display:block;
	z-index: 3;
}
.galleria li img.thumb{
	cursor:pointer;
	top:auto;
	left:auto;
	display:block;
	width:auto;
	height:auto;
	z-index: 2;
}
.galleria li .caption{
	display:block;
	padding-top:.5em;
	z-index: 1;
}
.galleria_container{
	margin:0 auto 0px auto;
	height:400px;
	width:620px;
	float:right;
	z-index: 1;
}
.nav{
	position:absolute;
	top:400px;
	left:40px;
	z-index: 21;
}
* html .galleria li div span{
	width:400px;
	z-index: 1;
} /* MSIE bug */

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 

$('.nav').css('display','none'); // hides the nav initially

$('ul.gallery').galleria({
			history   : false, // deactivates the history object for bookmarking, back-button etc.
			insert    : undefined, // the containing selector for our main image. 
								   // If not found or undefined (like here), galleria will create a container 
								   // before the ul with the class .galleria_container (see CSS)
			onImage   : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing
		});
	});
</script>

Vielen Dank für eure Hilfe.

 

[Maik]

Hi,

die z-index-Eigenschaft funktioniert nur in Verbindung mit der position-Eigenschaft (relative oder absolute), und das Element mit dem höchsten z-index-Wert liegt in der Schichtposition weiter vorne / oben - siehe hierzu auch das Kapitel z-index (Schichtposition bei Überlappung). Desweiteren können innerhalb eines Listenelements keine unterschiedliche Schichtpositionen festgelegt werden.

Demnach müsste für die Navigationsleiste ein höherer z-index-Wert eingestellt werden, als für die Galerie.

Achja, von einem "z-index-Bug" im IE hab ich auch noch nie etwas gehört. :suspekt:

 

[fortyniner]

Hallo,

ich habe es jetzt mit absoluter und relativer Positionierung des containers probiert.

Hat das Problem aber leider nicht gelöst.

Was soll ich denn konkret eingeben?

Gruß

 

[Maik]

Ich hab doch vorhin darauf hingewiesen, dass für die horizontale Navigation eine höhere Schichtposition als für die Galerie eingerichtet werden muss.

Da sie aber noch immer keine z-index-Angabe besitzt, wird sie von den nachfolgenden Elementen in der Schichtposition überdeckt.

 

[fortyniner]

Ich weiss jetzt ehrlich gesagt nicht was du meinst...

Die Items unter Leistungen haben alle einen z-index von 300.

 

[Maik]

Versuch es mal über das DIV #FWTableContainer729912375.

 

[fortyniner]

Hat geklappt

Vielen Dank