Top-Themen

Aktuelle Themen (A bis Z)

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, 4584 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
Administrator.de Feedback
Bug beim Übernehmen der Überschriften-Texte von Links?
gelöst Frage von LochkartenstanzerAdministrator.de Feedback2 Kommentare

Moin, Als ich den Link IFixit: 2016er MacBook Pro mit Touch Bar praktisch nicht zu reparieren hinzugefügt habe, haben ...

PHP
Inhalt eines divs ohne Javascript ändern!
gelöst Frage von LordKimahriPHP5 Kommentare

Ich suche derzeit nach einer brauchbaren alternative mein "Content-Div" per klick auf einen Link mit Inhalt zu versorgen, derzeit ...

HTML
Mehrere divs über img legen
gelöst Frage von BadgerHTML9 Kommentare

Hallo Leute, ich steh gerade total an und würde mich über eure Hilfe freuen. Und zwar muss ich mehrere ...

Visual Studio
Dot.Net Bug?
gelöst Frage von MarabuntaVisual Studio2 Kommentare

Ich habe möglicherweise einen Bug gefunden, da der Befehl aus C# u.o. DotNet kommt, wollte ich fragen ob ihr ...

Neue Wissensbeiträge
Linux

Limux-Ende in München: Wie ein Linux Projekt unter Ausschluss der Öffentlichkeit zerstört wurde

Information von Frank vor 1 StundeLinux7 Kommentare

Mein persönlicher Kommentar zum Thema "Limux-Ende". Die SPD-Politikerin Anne Hübner hat die Richtung von München ganz klar definiert: "Wir ...

Batch & Shell

Open Object Rexx: Eine mittlerweile fast vergessene Skriptsprache aus dem Mainframebereich

Information von Penny.Cilin vor 1 TagBatch & Shell9 Kommentare

Ich kann mich noch sehr gut an diese Skriptsprache erinnern und nutze diese auch heute ab und an noch. ...

Humor (lol)

"gimme gimme gimme": Automatischer Test stolpert über Easter Egg im man-Tool

Information von Penny.Cilin vor 1 TagHumor (lol)6 Kommentare

Interessant, was man so alles als Easter Egg implementiert. Ist schon wieder Ostern? "gimme gimme gimme": Automatischer Test stolpert ...

MikroTik RouterOS

Mikrotik - Lets Encrypt Zertifikate mit MetaROUTER Instanz auf dem Router erzeugen

Anleitung von colinardo vor 1 TagMikroTik RouterOS8 Kommentare

Einleitung Folgende Anleitung ist aus der Lage heraus entstanden das ein Kunde auf seinem Mikrotik sein Hotspot Captive Portal ...

Heiß diskutierte Inhalte
Router & Routing
Zwei Netzwerke erstellen
Frage von bunteblumeRouter & Routing13 Kommentare

Hallo Zusammen, Ich möchte gerne ein backup von einem bestimmten Folder welcher auf dem Server regelmässig synchronisiert wird auf ...

Off Topic
Fachkräftemangel in Deutschland? - Talentschmiede schreibt alle 2 Tage die gleichen Stellen aus
Frage von Penny.CilinOff Topic12 Kommentare

Hallo, haben wir in Deutschland Fachkräftemangel? Die Talentschmiede schreibt gefühlt alle zwei Tage dieselben Stellen aus. Und das schon ...

Microsoft Office
Outlook Cache Mode Frage
Frage von GwaihirMicrosoft Office11 Kommentare

Hallo zusammen, bin gerade neu in der Firma und lerne hier einige neue Dinge kennen. Zum Beispiel, dass die ...

Windows Server
Windows Store Apps
gelöst Frage von PeterleBWindows Server11 Kommentare

Gibt es einen Weg, auf Windows Server 2016 Windows Store Apps wie zum Beispiel die HP Smart App zu ...