Z-index Bug bei IE, Text steht immer über indexierten Divs

Tagchen,

Ich arbeite zurzeit an folgender Webseite: dev.contrast-hosting.ch/weiher

Im Firefox läuft soweit alles bestens, nur der IE macht (natürlich) Probleme.
In der unteren Navigation "Events" soll der Seiteninhaber kommende Ereignisse auf der Webseite veröffentlichen können.
Das ganze ist hübsch mit jQuery animiert. Ich habe dort eine Liste (ul/li), in den li-Elementen ist wiederum ein div "li_bg" und "li_content" mit position:absolute innerhalb des jeweiligen li-Elements. Der li_bg liegt nun (im Firefox korrekt) dank z-index eigentlich über dem li_content, welcher wiederum 3 Divs mit Inhalt beherbergt, so dass ich durch einen Mouseover (über li_bg, da dieser ja über li_content liegt) die Transparenz des parent-Elements (des li-elements) auf opacity:1 animieren kann.

Der IE hat leider einige Probleme mit dem z-Index. Ich habe natürlich schon nach "ie z-index bug" bei google gesucht und einige Threads gefunden, nur ist die Situation in meinem Fall noch etwas anders, da von der HTML-Hierarchie ja beide Elemente (li_bg und li_content) auf derselben Höhe stehen. Weise ich li_bg den z-index 4 und li_content den z-Index 2 zu, so scheint der Text innerhalb der Divs im li_content-Div trotzdem auf den ganzen z-Index Kram zu scheissen und legt sich immer über alle anderen Elemente. Somit entsteht bei einem Mouseover eines optisch einheitlichen Listelements natürlich ein Flacker-Effekt, da die Maus immer wieder aus dem li_bg-Div auf die Schrift übergeht und umgekehrt.

Ich muss es nun also irgendwie hinbekommen, dass auch der IE kapiert, dass der li_bg-Div vollkommen über dem li_content und dessen Inhalt steht.

HTML

<li id="event_10_titel">  
    <div class="li_bg"></div>  
    <div class="li_content">  
        <div class="event_day">20.</div>  
        <div class="event_month">Mai.</div>  
        <div class="event_hour">22:22</div>  
    </div>
</li>

CSS

#eventlist li {
        position:relative;
	margin:10px 5px;
	padding:0;
	width:80px;
	height:80px;
	float:left;
}

.li_bg {
	position:absolute;
	top:0;
	left:0;
	z-index:4;
	display:block;
	width:80px;
	height:80px;
	cursor:pointer;
}

.li_content {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:80px;
	height:80px;
	display:block;
}

.event_day {
	margin:0;
	padding:4px 0 0;
	width:80px;
	height:46px;
	float:left;
	font-size:36px;
	text-align:center;
}

.event_month {
	margin:0;
	padding:2px 4px;
	width:30px;
	height:26px;
	float:left;
	text-align:right;
	font-size:14px;
}

.event_hour {
	margin:0;
	padding:2px 0;
	width:42px;
	height:26px;
	float:left;
	text-align:left;
	font-size:14px;
}

Hoffe ich konnte mich mehr oder weniger klar ausdrücken, ist halt ein etwas komplexes Problem.

Gruss Jinxy

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 133767

Url: https://administrator.de/contentid/133767

Ausgedruckt am: 22.11.2024 um 22:11 Uhr

1 Kommentar

Na, wieder mal selber auf die Lösung gekommen. Für den IE musste ich dem li_bg einfach ein img einbetten welches das gesamte li ausfüllt, dann opacity auf 0 stellen und gut is