Sebastian Becker: transparenter iframe

Hallo,

ich binde einen transparenten iframe in eine Seite ein mit:
<body style="background-color:transparent"> in der iframe-Seite
<iframe [...] allowtransparency="true"> in der Hauptseite

Das funktioniert allerdings nur im Internet-Explorer, und z.B. im Mozilla und Opera wird die Standard-Hintergrundfarbe angezeigt.

Wie kann ich (ohne Browserabfrage) erreichen, daß Browser, die dies beherrschen den iframe transparent anzeigen und alle anderen einen zu definierenden Hintergrund?

Danke für alle Tips, Grüße,

Sebastian

  1. Hallo Sebastian,

    ich binde einen transparenten iframe in eine Seite ein mit:
    <body style="background-color:transparent"> in der iframe-Seite

    was für eine hintergrundfarbe soll der <body> denn haben?

    <iframe [...] allowtransparency="true"> in der Hauptseite

    das Attribut allowtransparency gibt es nicht.

    Das funktioniert allerdings nur im Internet-Explorer,

    logisch, der macht ja jeden noch so falschen Murks.

    und z.B. im Mozilla und Opera wird die Standard-Hintergrundfarbe angezeigt.

    ist ja auch richtig so.

    Wie kann ich (ohne Browserabfrage) erreichen, daß Browser, die dies beherrschen den iframe transparent anzeigen und alle anderen einen zu definierenden Hintergrund?

    ein style="background-color:transparent;" in <iframe> sollte eigentlich helfen, aber was willst du durch das iframe eigentlich sehen?

    Grüße aus Nürnberg
    Tobias

    --
    Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
    1. Hallo, Tobias,

      was für eine hintergrundfarbe soll der <body> denn haben?

      Im Internet Explorer und somit bei 90% der Nutzer "transparent".

      das Attribut allowtransparency gibt es nicht.

      Vielleicht nicht in der offiziellen HTML-Spezifikation (This property is a Microsoft extension to HTML) ...
      http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/allowtransparency.asp

      logisch, der macht ja jeden noch so falschen Murks.

      Darüber will ich jetzt nicht diskutieren. Tatsache ist, daß ich das Layout dank dieser proprietären Erweiterung bei fast allen Nutzern so darstellen kann wie ich möchte ...

      ein style="background-color:transparent;" in <iframe> sollte eigentlich helfen, aber was willst du durch das iframe eigentlich sehen?

      Das steht ja im body des iframes und da gehört es wohl auch hin. Sinn und Zweck ist es, im iframe einen scrollbaren Text anzuzeigen, der sich über dem Hintergrundbild der Hauptseite bewegt.

      Ich könnte natürlich dem iframe ein fixiertes Hintergrundbild geben, das nahtlos an das Hintergrundbild des Hauptfensters anschließt. Ich fürchte aber, daß es in einigen Browsern einen Versatz gibt und im NS 4.7 z.B. kann man Hintergründe gar nicht fixieren. Außerdem ist mir der Aufwand zu hoch ...

      Grüße,

      Sebastian

      1. Moin!

        ein style="background-color:transparent;" in <iframe> sollte eigentlich helfen, aber was willst du durch das iframe eigentlich sehen?
        Das steht ja im body des iframes und da gehört es wohl auch hin. Sinn und Zweck ist es, im iframe einen scrollbaren Text anzuzeigen, der sich über dem Hintergrundbild der Hauptseite bewegt.

        Ich könnte natürlich dem iframe ein fixiertes Hintergrundbild geben, das nahtlos an das Hintergrundbild des Hauptfensters anschließt. Ich fürchte aber, daß es in einigen Browsern einen Versatz gibt und im NS 4.7 z.B. kann man Hintergründe gar nicht fixieren. Außerdem ist mir der Aufwand zu hoch ...

        Hahaha, dein Netscape-4-Argument gegen nicht fixierbare Hintergründe läßt sich wunderbar auch gegen deine IFrames einsetzen, die du stattdessen haben willst: Die kann dieser Browser nämlich auch nicht. Was nun?

        Warum nimmst du nicht einfach die naheliegendste Möglichkeit: Ein DIV mit overflow:scroll als CSS-Attribut. Das zwar auch Probleme in einzelnen Browsern wie dein Iframe, funktioniert aber doch in mehr Browsern.

        - Sven Rautenberg

        --
        Signatur oder nicht Signatur - das ist hier die Frage!
        1. Hallo, Sven,

          Hahaha, dein Netscape-4-Argument gegen nicht fixierbare Hintergründe läßt sich wunderbar auch gegen deine IFrames einsetzen, die du stattdessen haben willst: Die kann dieser Browser nämlich auch nicht. Was nun?

          Stimmt, das sollte doch ein Witz sein ;-) . Ich bin aber so gnädig und biete unverbesserlichen Netscape-4-Nutzern die Inhalte in einer Textarea an.

          Warum nimmst du nicht einfach die naheliegendste Möglichkeit: Ein DIV mit overflow:scroll als CSS-Attribut. Das zwar auch Probleme in einzelnen Browsern wie dein Iframe, funktioniert aber doch in mehr Browsern.

          Das habe ich mit overflow:auto probiert und es funktionierte nur im Internet Explorer. Iframe hingegen werden in fast allen neueren Browsern angezeigt, aber eben nur nicht mit Transparenz.

          Das ganze Problem resultiert letztlich daraus, daß ich mich für ein Layout mit fester Höhe (Breitwandformat) entschieden habe, so daß ich die Inhalte nicht komplett scrollen kann. Nun sind aber noch längere Texte (FAQs) hinzugekommen.

          Eine recht gute Lösung für diesen Zielkonflikt scheint eigentlich der scrollbare iframe in Verbindung mit der Textarea für Uralt-Browser (die Inhalte werden serverseitig doppelt ausgegeben) zu sein. Als Tüpfelchen auf dem i fehlt jetzt allerdings noch der iframe-Hintergrund.

          Möglicherweise werde ich jetzt doch eine Browserabfrage machen und den Hintergrund für den IE als transparent und sonst in einer an den Originalhintergrund angepaßten Farbe oder mit einem modifizierten Hintergrundbild ausgeben.

          Dann muß ich das Skript allerdings modifizieren, sobald die normbildende Marktmacht von Microsoft oder die Wünsche der Designer zur Unterstützung der iframe-Transparenz durch andere Browser führen ...

          Ach, mit was für Problemen man sich doch so herumschlägt. ;-)

          Vielleicht hat ja noch jemand eine Idee ...

          Grüße,

          Sebastian

          1. Hallo Sebastian,

            Warum nimmst du nicht einfach die naheliegendste Möglichkeit: Ein DIV mit overflow:scroll als CSS-Attribut. Das zwar auch Probleme in einzelnen Browsern wie dein Iframe, funktioniert aber doch in mehr Browsern.

            Das habe ich mit overflow:auto probiert und es funktionierte nur im Internet Explorer.
            dann hast du was falsch gemacht - bei mir funktioniert das mit Mozilla 1.2.1, Opera 7, Netscape7.0 und IE5.0. Opera6 stellt den Text (wie ns4 vmtl. (<-sicher kann ich das nicht sagen, habe gerade keinen da) auch) einfach aus dem Feld herausfließend dar - was ja auch sinnvoll ist.

            Iframe hingegen werden in fast allen neueren Browsern angezeigt,

            naja, ns4 würde ich nicht als neu bezeichnen :-)

            aber eben nur nicht mit Transparenz.

            doch, so wie ich das vorgeschlagen habe, funktioniert es (Opera7 hat da irgendwie eine Macke - der 6er macht es...)

            Das ganze Problem resultiert letztlich daraus, daß ich mich für ein Layout mit fester Höhe (Breitwandformat) entschieden habe, so daß ich die Inhalte nicht komplett scrollen kann.

            festgezimmerte Layouts sind immer schlecht.

            Eine recht gute Lösung für diesen Zielkonflikt scheint eigentlich der scrollbare iframe in Verbindung mit der Textarea für Uralt-Browser (die Inhalte werden serverseitig doppelt ausgegeben) zu sein.

            ich wär eher für overflow:scroll; - dann musst du die Daten auch nicht doppelt ausgeben

            Dann muß ich das Skript allerdings modifizieren,

            siehst du - wenn du es gleich Standardkonform machst, brauchst du später nichts mehr zu ändern...

            sobald die normbildende Marktmacht von Microsoft

            *rofl*

            Grüße aus Nürnberg
            Tobias

            --
            Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
      2. Hallo Sebastian,

        was für eine hintergrundfarbe soll der <body> denn haben?
        Im Internet Explorer und somit bei 90% der Nutzer "transparent".

        ja, aber was soll man "durch" den body sehen?

        das Attribut allowtransparency gibt es nicht.
        Vielleicht nicht in der offiziellen HTML-Spezifikation

        wo sonst nicht?

        (This property is a Microsoft extension to HTML) ...

        das ist irrelevant - proprietärer Käse von M$ interessiert nicht (bitte jetzt keine Browserkrieg anfangen :-))

        logisch, der macht ja jeden noch so falschen Murks.
        Darüber will ich jetzt nicht diskutieren.

        _jetzt_ nicht? heißt dass, du stimmst dem nicht zu *droh*... *scnr*

        Tatsache ist, daß ich das Layout dank dieser proprietären Erweiterung bei fast allen Nutzern so darstellen kann wie ich möchte ...

        fast allen? nun ja, hier im Forum sind es bestenfalls 60% - und was ist mit den restlichen 40%?

        ein style="background-color:transparent;" in <iframe> sollte eigentlich helfen, aber was willst du durch das iframe eigentlich sehen?
        Das steht ja im body des iframes und da gehört es wohl auch hin.

        hast du es probiert? imho muss das iframe auch durchsichtig sein.

        Sinn und Zweck ist es, im iframe einen scrollbaren Text anzuzeigen, der sich über dem Hintergrundbild der Hauptseite bewegt.

        das geht ganz ohne iframes auch mit einem div, mit einem overflow:scroll; - was aber nicht jeder Browser versteht.

        Ich könnte natürlich dem iframe ein fixiertes Hintergrundbild geben, das nahtlos an das Hintergrundbild des Hauptfensters anschließt. Ich fürchte aber, daß es in einigen Browsern einen Versatz gibt

        das würde ich auch vermute - du würdest es vmtl. nicht in 2 Browsern gleich hinbekommen.

        und im NS 4.7 z.B. kann man Hintergründe gar nicht fixieren.

        ns4 kann auch kein <iframe>...

        Grüße aus Nürnberg
        Tobias

        --
        Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
        1. Hallo, Tobias,

          ja, aber was soll man "durch" den body sehen?

          "durch" den body des iframe sieht man den body der Seite, in die dieser eingebettet ist ...

          das ist irrelevant - proprietärer Käse von M$ interessiert nicht (bitte jetzt keine Browserkrieg anfangen :-))

          dich interessiert es vielleicht nicht, wohl aber die Nutzer ...

          _jetzt_ nicht? heißt dass, du stimmst dem nicht zu *droh*...

          ja, ich baue jetzt mal eine gehörige Drohkulisse auf ;-) ...

          fast allen? nun ja, hier im Forum sind es bestenfalls 60% - und was ist mit den restlichen 40%?

          Entscheidend ist nicht das Nutzerverhalten im SelfHTML-Forum, sondern das der angesprochenen Zielgruppe ...

          imho muss das iframe auch durchsichtig sein.

          nachdem es sich um eine microsoftspezifische Erweiterung handelt, mache ich es so, wie es von MS empfohlen wird und so funktioniert es auch (im IE) ...

          das geht ganz ohne iframes auch mit einem div, mit einem overflow:scroll; - was aber nicht jeder Browser versteht.

          eben ...

          Grüße aus Berlin,

          Sebastian

          1. Hallo Sebastian,

            ja, aber was soll man "durch" den body sehen?
            "durch" den body des iframe sieht man den body der Seite, in die dieser eingebettet ist ...

            Uups - ich habe nicht gesehen, dass das background-color:transparent; im <body> der Datei _im_ <iframe> steht *indieEckestellundschäm*

            das ist irrelevant - proprietärer Käse von M$ interessiert nicht (bitte jetzt keine Browserkrieg anfangen :-))
            dich interessiert es vielleicht nicht, wohl aber die Nutzer ...

            meinst du?

            fast allen? nun ja, hier im Forum sind es bestenfalls 60% - und was ist mit den restlichen 40%?
            Entscheidend ist nicht das Nutzerverhalten im SelfHTML-Forum, sondern das der angesprochenen Zielgruppe ...

            ich hoffe doch mal, dass die Browseranteile vom IE sinken werden (siehe Signatur) :-)

            Grüße aus Nürnberg
            Tobias

            --
            Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
  2. Hallo Sebastian,

    ich binde einen transparenten iframe in eine Seite ein mit:
    <body style="background-color:transparent"> in der iframe-Seite
    <iframe [...] allowtransparency="true"> in der Hauptseite

    Das funktioniert allerdings nur im Internet-Explorer, und z.B. im Mozilla und Opera wird die Standard-Hintergrundfarbe angezeigt.

    http://www.christian-seiler.de/temp/test-iframe-outside.html hilft zumindest beim Mozilla - bei Opera 6 und Konqueror nicht. (Opera 7 habe ich nicht getestet, IE konnte ich auch nicht testen)

    Wie kann ich (ohne Browserabfrage) erreichen, daß Browser, die dies beherrschen den iframe transparent anzeigen und alle anderen einen zu definierenden Hintergrund?

    Conditional comments - damit wäre Dein HTML auch valide.

    Viele Grüße,
    Christian

    --
    Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!