Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

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

Frage Entwicklung CSS

Mitglied: -CopyCat-

-CopyCat- (Level 1) - Jetzt verbinden

18.01.2010, aktualisiert 23:12 Uhr, 4562 Aufrufe, 1 Kommentar

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 ###n 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
01.
<li id="event_10_titel"> 
02.
    <div class="li_bg"></div> 
03.
    <div class="li_content"> 
04.
        <div class="event_day">20.</div> 
05.
        <div class="event_month">Mai.</div> 
06.
        <div class="event_hour">22:22</div> 
07.
    </div> 
08.
</li>
CSS
01.
#eventlist li { 
02.
        position:relative; 
03.
	margin:10px 5px; 
04.
	padding:0; 
05.
	width:80px; 
06.
	height:80px; 
07.
	float:left; 
08.
09.
 
10.
.li_bg { 
11.
	position:absolute; 
12.
	top:0; 
13.
	left:0; 
14.
	z-index:4; 
15.
	display:block; 
16.
	width:80px; 
17.
	height:80px; 
18.
	cursor:pointer; 
19.
20.
 
21.
.li_content { 
22.
	position:absolute; 
23.
	top:0; 
24.
	left:0; 
25.
	z-index:2; 
26.
	width:80px; 
27.
	height:80px; 
28.
	display:block; 
29.
30.
 
31.
.event_day { 
32.
	margin:0; 
33.
	padding:4px 0 0; 
34.
	width:80px; 
35.
	height:46px; 
36.
	float:left; 
37.
	font-size:36px; 
38.
	text-align:center; 
39.
40.
 
41.
.event_month { 
42.
	margin:0; 
43.
	padding:2px 4px; 
44.
	width:30px; 
45.
	height:26px; 
46.
	float:left; 
47.
	text-align:right; 
48.
	font-size:14px; 
49.
50.
 
51.
.event_hour { 
52.
	margin:0; 
53.
	padding:2px 0; 
54.
	width:42px; 
55.
	height:26px; 
56.
	float:left; 
57.
	text-align:left; 
58.
	font-size:14px; 
59.
}
Hoffe ich konnte mich mehr oder weniger klar ausdrücken, ist halt ein etwas komplexes Problem.

Gruss Jinxy
Mitglied: -CopyCat-
20.01.2010 um 10:00 Uhr
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 .
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Heiß diskutierte Inhalte
Microsoft
Ordner mit LW-Buchstaben versehen und benennen (21)

Frage von Xaero1982 zum Thema Microsoft ...

Netzwerkmanagement
gelöst Anregungen, kleiner Betrieb, IT-Umgebung (18)

Frage von Unwichtig zum Thema Netzwerkmanagement ...

Windows Update
Treiberinstallation durch Windows Update läßt sich nicht verhindern (17)

Frage von liquidbase zum Thema Windows Update ...