Z-Index Problem im IE

[DiDiJo]

Hi Leute .... ich hab ein z-Index Problem mit meinem Fotoalbum.

Irgendwie werden meine Kommentarfelder immer von dem nachfolgendem Element überlagert, obwohl ich eigentlich alle z-Index richtig gesetzt hatte:

Hier mal meine Struktur (vereinfacht):

<div id="galerie">
<div class="galleryBox "></div>
<div class="galleryBox "></div>
<div class="galleryBox "></div>
<div class="galleryBox "></div>
<div class="galleryBox last"></div>
<div class="clear"/>

eine galleryBox sieht so aus:

<div class="galleryBox ">
<div class="imageBox">
<div class="bild_kommentar">das ist ein test</div>
<input class="checkbox" type="checkbox" value="22" name="bilder[]"/>
<img class="image" border="0" alt="Bild von xyz 123" src="/uploads/images/small/banksy-again1.jpg"/>
</div>
<div class="imageRating">
<span class="bewertung_text">Bewertung: </span>
<div class="star_block small">
<img border="0" alt="1" src="/pics/star_white_small.jpg"/>
<img border="0" alt="2" src="/pics/star_white_small.jpg"/>
<img border="0" alt="3" src="/pics/star_white_small.jpg"/>
<img border="0" alt="4" src="/pics/star_white_small.jpg"/>
<img border="0" alt="5" src="/pics/star_white_small.jpg"/>
</div>
</div>
<div class="imageOwner">von xyz 123</div>
</div>

und nun die dazugehörigen CSS anweisungen:

.galleryBox {
	float:left;
	width:132px;
	height:150px;
	margin-right:11px;
	margin-bottom:11px;
	background-image:url(../pics/bild_bg.jpg);
	background-repeat:no-repeat;
	background-position:top;
	position:relative;
	/*z-index:1;*/
}

.last.galleryBox {
	margin-right:0;
}

.imageBox {
	height:109px;	
	width:132px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.image {
	border:1px solid #dddddd;
	vertical-align:middle;
}


#meldung, .bild_kommentar {
	position:absolute;
	width:330px;
	min-height:40px;
	top:100px;
	left:50px;
	
	background-color:#FFFFFF;
	border:1px solid #5b5b5b;
	padding:13px 10px 10px 10px;
	
	filter:alpha(opacity=90); /* Internet Explorer */
	-moz-opacity: 0.90; /* Mozilla Browser */
	opacity: 0.90; /* Opera */	
}

.bild_kommentar {
	font-size:9px;
	top:25px;
	left:-25px;
	width:160px;
	display:none;
	z-index:2;
}

.imageBox:hover .bild_kommentar {
	display:block;
}

die z-Index anweisung im block .galleryBox habe ich auskommenteiert, da ich so schonmal das richtige ergebnis im FF habe. Nur der IE zickt mal wieder um ....

hier mal nen testlink
http://foto.wavepoint.de/admin/

 

[Maik]

Hi,

dieser Problemfall wurde hier schon einige Male vorgestellt, und ich hab da nur die Empfehlung, den Boxen eine absteigende Schichtpositionerung mit auf dem Weg zu geben.

mfg Maik

 

[DiDiJo]

verstehe ich das richtig ... ic hgeb also er ersten box (oben links) nen z-index von 200 der nächsten dann 199 etc bis auf 1 runter .... und das dann hard kodiert direkt ins html tag ?

 

[Maik]

Richtig erkannt, aber "hard kodiert" in die HTML-Tags ist nicht erforderlich.

mfg Maik

 

[DiDiJo]

ich habs jetzt dennoch mal direkt ins TAG geschriben bevor ich irgendwann ne css anweisung dafütr schreibe .... funktionieren tut es aber dennoch nicht. Jetzt wird die Kommentarbox nur an der anderen Seite (links) überlagert

 

[Maik]

Klar, die Kommentarbox überlappt die darunterliegende Box ja auch von beiden Seiten, also hat sich das Problem nun auf die gegenüberliegende Seite verlagert

Im IE8 taucht das Problem überhaupt nicht auf, wie ich eben festgestellt habe.

mfg Maik

 

[DiDiJo]

gut ... das ergebnis hab ich erkannt .... die frage ist jetzt nur wie das löse ... oder ist das so offentsichtlich und ich hab einfach nur tomaten auf den Augen ...

 

[Maik]

An deiner Stelle würde ich die Kommentarboxen zumindest für den IE6 + 7 schmäler gestalten, denn mein Vorschlag mit der absteigenden Schichtpositionierung funktioniert nur "einseitig".

Und vernachlässige hier bitte nicht die erwünschte Groß- und Kleinschreibung - vielen Dank.

mfg Maik