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, 4567 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 ..
Ähnliche Inhalte
Erkennung und -Abwehr
Dishwasher has directory traversal bug The Register (3)

Link von Lochkartenstanzer zum Thema Erkennung und -Abwehr ...

Administrator.de Feedback
gelöst Bug in einzelnen Threads: Antwortübersicht fehlerhaft bzw. unvollständig (4)

Frage von em-pie zum Thema Administrator.de Feedback ...

Outlook & Mail
Outlook 2016 löscht Text aus E-Mail beim senden (4)

Frage von Peacer zum Thema Outlook & Mail ...

JavaScript
gelöst Datumabhängiger Text in HTML anzeigen (4)

Frage von adm2015 zum Thema JavaScript ...

Neue Wissensbeiträge
Google Android

Cyanogenmod alternative Downloadquelle

(5)

Tipp von Lochkartenstanzer zum Thema Google Android ...

Batch & Shell

Batch als Dienst bei Systemstart ohne Anmeldung ausführen

(5)

Tipp von tralveller zum Thema Batch & Shell ...

Sicherheits-Tools

Sicherheitstest von Passwörtern für ganze DB-Tabellen

(1)

Tipp von gdconsult zum Thema Sicherheits-Tools ...

Heiß diskutierte Inhalte
Server
gelöst Wie erkennen, dass nur deutsche IPs Zugang zu einer Website haben? (22)

Frage von Coreknabe zum Thema Server ...

Hardware
16-20 Port POE Switch mit VLAN (19)

Frage von thomasreischer zum Thema Hardware ...

Windows Server
gelöst Exchange HyperV Prozessorlast (19)

Frage von theoberlin zum Thema Windows Server ...

Windows Userverwaltung
Nicht Administratoren Installation von Software erlauben (14)

Frage von WinLiCLI zum Thema Windows Userverwaltung ...