Layer über Iframe klappen

[Nemorem]

Hallo,

Bei einem kleinen Onlineshop, dessen Entwurf ich gerade mache, hat sich ein mysteriöser kleiner Fehler eingeschlichen. Mysteriös desshalb, weil es 3 Tage lang funktionierte und dann in den letzten 10 Minuten plötzlich, aufgrund kosmetischer Veränderungen nicht mehr ging.

Bei der angegebenen URL findet sich beim Punkt "Gastronomie" ein Layer, welcher aufgeklappt wird.

Aber neuerdings wird der Layer bei Firefox und anderen Mozilla Browsern beim übertreten der Linie zum Iframe ausgeblendet und auch der IE macht plötzlich sehr merkwürdige "Clippingfehler"

Das hat 3 Tage lang funktioniert und ich kann mir trotz stundenlanger zermarterei keinen Reim darauf machen. Irgendetwas was nicht direkt damit zu tun hat muss ich wohl geändert haben, aber was das ist, darauf komme ich einfach nicht.

Für Hinweise die zur Ergreifung des Fehlers führen ist ein Kopfgeld von 100 Disneytalern ausgesetzt.

Vielen Dank.

[Gernot Back]

Hallo Nemorem,

Aber neuerdings wird der Layer bei Firefox und anderen Mozilla Browsern beim übertreten der Linie zum Iframe ausgeblendet und auch der IE macht plötzlich sehr merkwürdige "Clippingfehler"

Irgendetwas was nicht direkt damit zu tun hat muss ich wohl geändert haben, aber was das ist, darauf komme ich einfach nicht.

Also bei mir sieht das unter Windows XP in IE6, Firefox 1.5 und Netscape 7.1 so aus wie du das haben willst: Das Untermenü von "Gastronoimie klappt über den Iframe.

Dass das mit Opera (gleich welcher Version) nicht funktionieren kann, ist klar, denn der kann über Iframes keine Layer legen.

Gruß Gernot

[Ashura]

Hallo Gernot.

Dass das mit Opera (gleich welcher Version) nicht funktionieren kann, ist klar, denn der kann über Iframes keine Layer legen.

Doch, seit Version 9TP1 schon.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Nemorem]

Das Aufklappen funktioniert tadellos, ich habe mich etwas missverständlich ausgedrückt. Fährt man aber mit dem Mauszeiger den Layer entlang nach unten, wird dieser im Moment ausgeblendet, indem man die Grenze zum Iframe passiert.

Zwar habe ich gerade kein WinXP zur hand, kann mir aber nicht vorstellen, dass das Betriebssystem daran etwas ändern würde, jedenfalls bereitet mir diese Vorstellung Kopfschmerzen.

[Ashura]

Hallo Nemorem.

Das Aufklappen funktioniert tadellos, ich habe mich etwas missverständlich ausgedrückt. Fährt man aber mit dem Mauszeiger den Layer entlang nach unten, wird dieser im Moment ausgeblendet, indem man die Grenze zum Iframe passiert.

Das ist genau dasselbe, wie das, was du bereits sagtest.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nemorem]

Die Nachricht war für Gernot, habe da noch nicht ganz verstanden wie das hier funktioniert.

[Gernot Back]

Hallo nochmal,

Also bei mir sieht das unter Windows XP in IE6, Firefox 1.5 und Netscape 7.1 so aus wie du das haben willst: Das Untermenü von "Gastronoimie klappt über den Iframe.

Ich weiß jetzt nicht, ob ich das beim ersten Test übersehen habe, aber ich kann dein Problem jetzt mit Netscape 7.1, komischerweise aber immer noch nicht in Firefox 1.5 nachvollziehen:

Ich glaube du hättest weniger Probleme, wenn du statt mit Layouttabellen mit einfachen Blockelementen arbeiten würdest und hier dann statt mit der Eigenschaft "Visibility" mit "Display" (block bzw. none zum Ein- und Ausblenden).

Wenn du ohne Layouttabellen und statt dessen mit einem CSS-Layout arbeitest, brauchst du wahrscheinlich auch nicht diese Höhenberechnung des Iframe-Elements mit Javascript und auf das Schreiben des Iframe-Elements mittels document.write() kannst du dann auch verzichten. Das ist sowieso besser, denn dann können auch Nutzer deine Inhalte sehen, die Javascript im Browser deaktiviert haben.

Schau dir doch mal den folgenden Tipps-und-Tricks-Artikel an:

http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm

Vielleicht findest du da auch ein Beispiel, in das du ein Iframe-Element so einbauen kannst, dass er sich nach Abzug der fixierten Bereiche den restlichen zur Verfügung stehenden Platz zu 100% nimmt (ohne Javascript).

Außerdem ist mir an deinem Code aufgefallen, dass du deinen Iframe in ein P-Element gepackt hast. Das ist meines Wissens nicht zulässig. In ein P-Element darfst du keine weiteren Blockelemente packen.

Davon abgesehen: du hättest wirklich auch in  diesem Thread noch mal nachfragen können, anstatt das in einem neuen Thread zu tun, das wäre dann sicherlich auch beachtet worden:

https://forum.selfhtml.org/?t=121380&m=780249

Unser Archiv soll doch so übersichtlich wie möglich bleiben, damit Leute, die später ein ähnliches Problem wie du haben, sich die Informationen nicht umständlich an verschiedenen Stellen zusammensuchen müssen.

Gruß Gernot

[Gernot Back]

und nochmal:

Mir ist gerade noch eingefallen, dass ich insbesondere an Netscape 6 oder 7 schon häufiger die Eigenart beobachtet habe, dass CSS-Werte bei dynamischen Elementen während der Laufzeit "vergessen" werden.

Vielleicht reicht es ja schon, wenn du dein drüberklappendes Menü beim Mouseover-Event jeweils erst einmal an seinen Z-Index "erinnerst". Entsprechendes solltest du zusätzlich dann auch mit dem darunter liegenden Iframe machen, der möglicherweise, da es ja mit document.write in den Code eingefügt wird den Z-Index des Vorfahrenselements sowieso gar nicht in allen Browsern erbt.

Gruß Gernot

[Nemorem]

Den p Block habe ich entfernt, der gehört da wirklich nicht hin. Alternative Lösungsvorschläge sind immer willkommen, von non plus ultra bin ich weit entfernt, das weiß ich selbst, aber die Zeit mich da durchzuackern kann ich mir leider erst nehmen, nachdem ich hier fertig bin.

Was mich vollkommen verwirrt ist die Tatsache, dass es wirklich 3 Tage lang tadellos funktioniert hat. Ich würde mich ja mit der Tatsache abfinden, dass Mozilla Browser einen Fehler haben, der das onMouseOut Event des Layers auslöst, sobald man mit der Maus in den Iframe Bereich kommt, aber ich weiß genau, dass es eigentlich schon funktioniert hat.

Ich habe das Beispiel mal total vereinfacht und auch hier klappt das Menü einfach weg (Firefox 1,7; Netscape 7.0; Mozilla 1.6):

http://www.lauscher.at/shop/temp/test.htm

Die Aussage bei WinXP und Firefox 1.7 würde es funktionierten macht mich höchstgradig wuschig, die Unterschiede der Browser sind ja schon nervenaufreibend genug. Kannst du das wirklich auch jetzt bestätigen?

Ps: Das mit dem neuen Beitrag tut mir nachträglich leid. So wie das Forum sich optisch gab, sah ich meinen Beitrag im nichts verschwinden. Das es dennoch funktioniert ist jetzt bewiesen, wird nicht wieder vorkommen.

[Gernot Back]

Hallo Nemorem,

http://www.lauscher.at/shop/temp/test.htm

Da ergibt sich bei mir dasselbe Bild: In Netscape 7.1 tritt der Mouseout-Event ein, sobald man mit der Maus einen Bereich überfährt "unter" dem sich der Iframe erstreckt, nicht so in Firefox 1.5.

Das liegt tatsächlich am Z-index, den du ja für die Tabelle, die den Iframe umschließt, nicht angegeben hast. Eigentlich reicht es schon, dieser, den Iframe umschließenden Tabelle position:absolute zu verpassen, dann hat sie den Default-Z-Index "0" und liegt somit unter dem Klappmenüelement, das im Quellcode zwar vorher kommt, dem du unter absoluter Positionierung aber den Z-Index "1" gegeben hast.

Netscape 7.1 und deine anderen Geckobrowser unter deinem Betriebssystem rendern das Klappmenü ohne absolute Positionierung auch der Iframe-Tabelle offensichtlich zwar visuell so, als ob es darüber läge, maus-sensorisch scheint der aber dann doch noch darüber zu liegen, weshalb beim Übertritt in den Iframe-Bereich das Mouseout-Event ausgelöst wird und das Menü zurückklappt.

Ps: Das mit dem neuen Beitrag tut mir nachträglich leid. So wie das Forum sich optisch gab, sah ich meinen Beitrag im nichts verschwinden. Das es dennoch funktioniert ist jetzt bewiesen, wird nicht wieder vorkommen.

Viele kompetente Stammposter fangen hier sogar immer unten mit dem Lesen an. Hier braucht deshalb keiner vorschnell die Hoffnung aufzugeben. Das A und O ist halt eine präzise Fehlerbeschreibung und eine Reduzierung des geposteten ode verlinkten Quellcodes auf das Wesentliche, so wie du das jetzt gemacht hast.

Gruß Gernot

[Nemorem]

Hallo,

leider war ich gestern krank, also kam ich erst heute dazu.

Erstmal danke für deine Versuche. Anfänglich dachte ich auch tatsächlich es funktioniert wie von dir beschreiben, aber ich fürchte du hast dich zu einem Trugschluss hinreissen lassen. Davon abgesehen, dass das setzen von position:absolute beim IE zu sehr abartigen Anzeigen führt:

Mit position:absolute    http://www.lauscher.at/shop/default.htm
Ohne position:absoulte  http://www.lauscher.at/shop/default_old.htm

Dürfte deine Beobachtung, dass es dann funktioniert eine andere Ursache gehabt haben. Setzt man die Position der Tabelle auf absolut, verschiebt sie sich ein wenig nach oben links. Das hat zur Folge, dass in diesem Beispiel der Layer nun ganz im Iframe ist und nicht mehr die Grenze des Iframes überlappt.

Hier zur Veranschaulichung:

http://www.lauscher.at/shop/temp/test.htm

Bei nicht überschnittener Position passiert etwas ganz merkwürdiges. Die onMouseOut funktion des Layers wird nicht aufgerufen, wenn der Layer mit der Maus verlassen wird, sondern der ganze Iframe. So kann man hier den Layer also durchaus seitlich mit der Maus verlassen, erst wenn man den Iframe verlässt wird er ausgeblendet. Anhand des 2ten Beispiels sieht man, dass das eigentliche Problem aber auch hier bestehen bleibt.

Die Frage bleibt also bestehen, warum löst das übertreten der Framegrenze die mouseOut des Layers aus, und was kann man dagegen tun?

[Gernot Back]

Hallo Nemorem,

Davon abgesehen, dass das setzen von position:absolute beim IE zu sehr abartigen Anzeigen führt:

Mit position:absolute    http://www.lauscher.at/shop/default.htm

Abartige Anzeigen kann ich bei mir am IE6 unter XP nicht nachvollziehen,

Setzt man die Position der Tabelle auf absolut, verschiebt sie sich ein wenig nach oben links.

Hier zur Veranschaulichung:

http://www.lauscher.at/shop/temp/test.htm

Dafür gibt es ja dann die Eigenschaft top, zu der du dich noch nicht ausgelassen hast.

Bei nicht überschnittener Position passiert etwas ganz merkwürdiges. Die onMouseOut funktion des Layers wird nicht aufgerufen, wenn der Layer mit der Maus verlassen wird, sondern der ganze Iframe. So kann man hier den Layer also durchaus seitlich mit der Maus verlassen, erst wenn man den Iframe verlässt wird er ausgeblendet.

Das ist ja auch kein Wunder, wenn es so ist wie ich vermute, dass der Layer nämlich nur in der Bildschirmrenderung über dem Iframe liegt, maussensorisch aber darunter. Wie soll der Mouseout-Effekt da eintreten, wenn der Layer von vornherein durch den Iframe verdeckt ist?

Ich fürchte, dass du mit deinem Tabellenlayout ohnehin nicht weit kommst. Dein Warenkorb-Ändern-Link oben rechts ist damit ja auch gar nicht erreichbar.

Stell alles so weit es irgend möglich ist auf ein CSS-basiertes Layout um, dann funktioniert das auch. Da kommst du m.E. nicht drumherum, es sei denn du betreibst einen noch viel größeren Aufwand, indem du all die verschiedenen Browsermacken mit Javascript abfängst.

Gruß Gernot

[Nemorem]

Leider aber muss alles heute fertig werden. Das ganze basiert auf php und daher werde ich das Layout später problemlos austauschen können, für heute wäre mir eine Flicklösung aber noch wichtig gewesen.

Dein Warenkorb-Ändern-Link oben rechts ist damit ja auch gar nicht erreichbar.

der geht bei mir problemlos in allen Browsern.
Im IE unter Win2000 verschwindet der linke Rand, also der Tabellenhintergrund der absolut gesetzten Tabelle, nur auf der linken Seite wie gesagt.

Dass die Tabelle nach oben verschoben wird liegt sicher an Top, aber darum gings ja gar nicht, es erklärt ja nur, warum du geglaubt hast mit position:absolute würde es funktionieren, tut es leider aber nicht.

Wenns keine Lösung mehr dafür gibt wirds wohl halt die nächsten 1-2 Wochen nicht bei Mozilla funktionieren, hoffentlich bringe ich in der Zeit das CSS Layout zustande von dem du so begeistert zu sein scheinst. Viel Vorstellen kann ich mir darunter noch nicht...