1
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
CSS
Hoffe ich konnte mich mehr oder weniger klar ausdrücken, ist halt ein etwas komplexes Problem.
Gruss Jinxy
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 133767
Url: https://administrator.de/contentid/133767
Printed on: April 20, 2024 at 16:04 o'clock
1 Comment
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 
.
.
