Problem mit IE: Nutzung xml in iframe => defekter z-Index
ritschmanhard
- browser
Hallo!
Ich habe ein Problem mit der Darstellung von Elementen über/in einem iframe.
Einfaches Beispiel (mit html, funktioniert auch im IE):
(--------------test1.htm------------------)
<html>
<head><title>test</title></head>
<body>
<div style="position:absolute; top:100px; left:100px; z-Index: 3; background-color:red;">Ich lieg drüber</div>
<iframe src="./text1.htm" width="400" height="400" style="z-Index: 1;">
</iframe>
</body>
</html>
(--------------text1.htm------------------)
<html>
<head><title>text1</title></head>
<body style="background-color:green;">
<p>Ich bins!!!</p>
</body>
</html>
(-----------------------------------------)
Ich bins!!! steht sichtbar über dem iframe - GUT!
Jetzt aber, wie's nicht geht (im FF schon, nicht im IE!):
(--------------test2.htm------------------)
<html>
<head><title>test</title></head>
<body>
<div style="position:absolute; top:100px; left:100px; z-Index: 3; background-color:red;">Ich lieg drüber</div>
<iframe src="./text2.xml" width="400" height="400" style="z-Index: 1;">
</iframe>
</body>
</html>
(--------------text2.xml------------------)
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="./text2.xsl"?>
<document>
</document>
(--------------text2.xsl------------------)
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
<xsl:output method="html" ></xsl:output>
<xsl:template match="/">
<html>
<head><title>test</title></head>
<body style="background-color:green;">
<p>Ich bins!!!</p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
(-----------------------------------------)
Warum stellt der IE nun den "Ich bins!!!" Block nicht mehr im Vordergrund dar? - wie kann dies gelöst werden?
Grüsse,
Richard
Hi!
Korrektur 1:
Ich bins!!! steht sichtbar über dem iframe - GUT!
Es soll heissen:
Ich lieg drüber steht sichtbar über dem iframe - GUT!
Korrektur 2:
Warum stellt der IE nun den "Ich bins!!!" Block nicht mehr im Vordergrund dar? - wie kann dies gelöst werden?
Warum stellt der IE nun den "Ich lieg drüber" Block (...)
Grüsse,
Richard
Hi Richard,
ich muss zugeben, deine Beispiele kommen etwas verwirrend daher (auch nach der Ergänzung ;-)
Aber zum Thema:
Eigene Stapelebenen erzeugen nur absolut positionierte Elemente. Für deinen iframe hast du das vergessen. So funktioniert's (FF und IE's im CSS1Compat und Quirks Mode):
<body>
<div style="position:absolute; top:100px; left:100px; width:300px; height:300px; z-Index: 3; background-color:red;">Ich lieg drüber</div>
<iframe src="frame_inhalt.html" style="position:absolute; top:100px; left:100px; width:400px; height:400px; z-Index: 1;"></iframe>
</body>
Infos hier
Gruß
Antipitch
Hi Antipitch!
Betrifft nur den IE (hier Version 6.0.2900.2180.xpsp2(..))
Also, wenn ich dein Beispiel verwende, dann funktioniert es weiterhin, sofern im iframe eine __html__ Datei lade (das hat aber auch ohne position:absolute funktioniert); und es funktioniert weiterhin nicht, wenn ich im iframe eine __xml__ Datei lade.
Und im FF funktioniert nach wie vor beides.
Also scheint dies nicht die Fehlerursache zu sein (und löst auch das Problem nicht)
Trotzdem danke,
Richard
Hi Richard,
inzwischen auch mal die XML Variante ausprobiert. Das ist wirklich sehr seltsam. Der von dir beschriebene Effekt im IE7/ Win XP. Opera wie FF ganz normal. Google bisher nicht hilfreich, du noch was rausgefunden?
Gruß
Antipitch
Hi Antipitch!
AAAlso - ich hab rausgefunden, dass der IE 6 ein Problem mit folgenem hat:
"Der Grund dafür ist sind die sogenannten "windowed Controls" des IE, welche z-Index ignorieren und sich immer an der obersten Schichtposition befinden.
Dazu gehören u.a. <select>(bis Version6) und <iframe>(bis Version5)"
Nun scheint es so, dass für xml und iframe obiges auch noch für Version 6 gilt.
Entgegen dem Vorschlag, das unter dem Div liegende Element (iframe) auszublenden, bin ich dazu übergegangen, den div durch eine select/option box zu ersetzen (das funktioniert einigermaßen, da ich ein Menü in diesem div hatte).
Dieses Element wird nun (dank dynamischer Erzeugung) stets in den Vordergrund gesetzt - mein Tooltip liegt zwar jetzt hinter meinem Menü, aber DAS ist mir jetzt egal...
Grüsse,
Richard
Hallo nochmal!
Leider musste ich nun feststellen, dass dieser Bug auch (und nun exclusiv) im IE 7 auftritt - hier wurde das "Problem" mit select/option gelöst von MS gelöst - select/option wird nicht mehr automatisch nach vorne gelegt. Das Problem des überdeckenden IFrames bleibt allerdings.
Ich stehe also wieder am Anfang, da der mittels xml/xsl befüllte IFrame das (laut z-Index darüberliegende) Menüelement überdeckt (und der workaround mit select/option nicht mehr funktioniert).
Es ist zum sch**** schreien.
Aber vielleicht hat ja einer noch eine gute Idee.
Grüsse,
Richard
Hallo nochmal!
So - nun also doch: für den IE 7 blende ich den darunter liegenden IFrame während der Menüauswahl aus - ansonsten wäre mir nur noch eingefallen, das Menü gleichermassen als IFrame mit xml/xsl zu erzeugen - allerdings scheidet dieser Ansatz aus, da dies zum derzeitigen Zeitpunkt zu aufwendig ist.
Grüsse,
Richard