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

Mitglied: -CopyCat-

-CopyCat- (Level 1) - Jetzt verbinden

18.01.2010, aktualisiert 23:12 Uhr, 4593 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
Windows 10
Zero-Day-Lücke in Microsoft Edge
Information von kgborn vor 1 TagWindows 10

In Microsofts Edge-Browser klafft wohl eine nicht geschlossene (0-Day) Sicherheitslücke im Just In Time Compiler (JIT Compiler) für Javascript. ...

Sicherheit
Microsoft und Skype: Sicherheit
Information von kgborn vor 1 TagSicherheit

Die Tage gab es ja einige Berichte zur Sicherheit des Skype-Updaters. Der Updater von Skype läuft unter dem Konto ...

Datenschutz

Behörden ignorieren Sicherheitsbedenken gegenüber Windows 10

Information von Penny.Cilin vor 2 TagenDatenschutz8 Kommentare

Hallo, passend zum Thema Ablösung LIMUX in München ein Beitrag bei Heise (siehe Link folgend). Behörden ignorieren Sicherheitsbedenken gegenüber ...

Sicherheit
Information Security Hub Munich airport
Information von brammer vor 2 TagenSicherheit

Hallo, Neues Center für Cyber Kriminalität am Münchener Flughafen brammer

Heiß diskutierte Inhalte
DSL, VDSL
Mindestgeschwindigkeiten DSL Telekom
Frage von justlukasDSL, VDSL13 Kommentare

Hallo zusammen, Seit diesem Jahr habe ich Verständnisprobleme mit dem Verhalten der Telekom. Wir haben seit einem Jahr VDSL ...

Switche und Hubs
LANCOM-Switch: Probleme (no link) mit SFP-Modulen?
Frage von THETOBSwitche und Hubs10 Kommentare

Hi zusammen, ich habe folgendes Problem: Und zwar habe ich an einem Standort drei Switche verbaut - LANCOM GS-2326P+, ...

Firewall
RB2011 Firewall Rule eine bestimmte Mac oder IP Adresse nicht zu blockieren
Frage von lightmanFirewall10 Kommentare

Hallo liebes Forum mit ihren Spezialisten. Ich habe meine Firewall so konfiguriert das kein Endgerät ohne meine Speziellen Erlaubnis ...

Humor (lol)
Was könnte man mit einem Server machen? Idee gesucht
Frage von 2SeitenHumor (lol)8 Kommentare

Hey Zusammen Ich habe einen alten HP G2 Rackserver zu Hause rumliegen. 28GB Ram, 1xAMD Prozi mit etwa 2GHz. ...