nicht angemeldet
Eigenartiges Verhalten mit der BachgroundColor im IE6
Hallo Forum,
ich nutze das jQuery-Plugin Fancybox. Das ist im Grunde nicht anderes, als eine Lightbox, was alle hier schonmal gesehen haben sollten. In der Fancbox wird iframe angezeigt. Der iframe ist in einem div-Container untergebracht, für den ein png als Hintergrundbild definiert ist. Dieses png hat abgerundete Ecken, sprich transparente Bereiche (aber keine Alphatransparenz). Direkt im IE aufgerufen werden dies auf transparent dargestellt. Mit der Grafik scheint der IE6 also keine Probleme zu haben. Wo jedoch im FF bzw. IE7 durch die transparenten Breiche dieser Grafik hindurch, der Inhakt der darunterliegenden Ebene zu sehen ist, das ist der Body samt Inhalt, sieht man den im IE6 nicht. Gut, zuerst habe ich angenommen, dass irgendeine Ebene zwischen dem erwarteten und dem transparenten png liegt, für die ein Hintergund definiert ist. Dann habe ich aber den Browserhintergrund in den Einstellungen des IE von weiss auf blau geändert und sehe durch mit transparentes png hindurch dieses blau.
Wie kann das sein?
beste gruesse,
heinetz
-
Hi,
ich nutze das jQuery-Plugin Fancybox. Das ist im Grunde nicht anderes, als eine Lightbox, was alle hier schonmal gesehen haben sollten.
Aber von deinem Code sehe ich nichts. </hilfe/charta.htm#tipps-fuer-fragende>
In der Fancbox wird iframe angezeigt. Der iframe ist in einem div-Container untergebracht, für den ein png als Hintergrundbild definiert ist. Dieses png hat abgerundete Ecken, sprich transparente Bereiche (aber keine Alphatransparenz).
D.h., 8-Bit-PNG?
Ansonsten *ist* es Alphatransparenz, auch wenn der Alpha-Wert 0 beträgt.Direkt im IE aufgerufen werden dies auf transparent dargestellt. Mit der Grafik scheint der IE6 also keine Probleme zu haben.
Selbst wenn er die nicht haben sollte -
Wo jedoch im FF bzw. IE7 durch die transparenten Breiche dieser Grafik hindurch, der Inhakt der darunterliegenden Ebene zu sehen ist, das ist der Body samt Inhalt, sieht man den im IE6 nicht.
- ist PNG-Darstellung in älteren IE fast immer problematisch.
Dann habe ich aber den Browserhintergrund in den Einstellungen des IE von weiss auf blau geändert und sehe durch mit transparentes png hindurch dieses blau.
Wie kann das sein?
Schau'n mer mal - sobald du uns was zum schauen gibst.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
hi,
an der Grafik liegt es definitiv nicht, denn das Symptom tritt auch bei einem gif und selbst ganz ohne Grafik auf. Folgend der Code:
beste gruesse,
heinetz<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="imagetoolbar" content="no" /> <title>FancyBox 1.3.1 | Demonstration</title> <script type="text/javascript" src="../fancybox/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <style> body{ } #iphone{ width:362px; height:616px; background: url("mobile_preview/iphone_front.png") no-repeat scroll 0 0 transparent; /*background: transparent !important;*/ padding-left:33px; padding-top:134px; } #iphone .statusbar{ width:320px; height:20px; background: url("mobile_preview/iphone_status.png") no-repeat scroll 0 0 transparent; } #iphone .info_link{ position:relative; left: 26px; display:block; height:20px; width:37px; cursor:pointer; background: url("mobile_preview/iphone_info.png") no-repeat scroll 0 0 transparent; } #iphone .inner{ background: url("throbber.gif") no-repeat scroll center center white; width:320px; height:418px; } #iphone .frame{ display:block; position:absolute; left: 33px; } #iphone .info{ display:none; background: none repeat scroll 0 0 white; height: 398px; padding: 10px; position: absolute; text-align: left; width: 300px; } #iphone .info a{ cursor:pointer; text-decoration: underline; } #iphone .homebutton{ cursor:pointer; display:block; position: absolute; bottom:37px; left:157px; width:72px; height:72px; background: url("mobile_preview/iphone_home.png") no-repeat scroll 0 0 transparent; } #fancybox-outer{ background: transparent !important; } </style> <script type="text/javascript"> $(document).ready(function() { $("#mobile_preview").click(function(){ $.fancybox( '<div id="iphone"><div class="statusbar"><span class="info_link"></span></div><div class="inner"><iframe class="frame" scrolling="auto" src="http://www.daimler-betriebskrankenkasse.leo.dev/_admin/?site_id=1&mode=6" width="320" height="418" marginheight="0" marginwidth="0" frameborder="0"></iframe><div class="info"><h1>Info</h1><a>Info schliessen</a></div><span class="homebutton"></span></div></div>', { 'margin' : 0, 'padding' : 0, 'scrolling' : 'no', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'overlayOpacity' : 0.9, 'showCloseButton' : false }); $('*').css('background','none'); $('#fancybox-outer, div[id^=fancy-bg]').css('background','none'); $('#iphone .homebutton').attr('title', 'Ansicht schliessen').click(function(){$.fancybox.close();}); $($('#iphone .frame')[0].document).ready(function(){$('#iphone .frame').show();}); $('#iphone .info a').click(function(){$('#iphone .info').hide();}); $('#iphone .info_link').click(function(){$('#iphone .info').show();}); }); }); </script> </head> <body> <a id="mobile_preview" href="?site_id=3">iPhone</a> </body> </html>-
Hi,
Folgend der Code:
Hier hast du ein Pflaster*
* Dass du dich geschnitten hast, wenn du annimmst, dass ich mir sämtliche darin eingebundenen Scripte jetzt selber runterlade, um das nachvollziehen zu können, ist doch wohl glasklar.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
* Dass du dich geschnitten hast, wenn du annimmst, dass ich mir sämtliche darin eingebundenen Scripte jetzt selber runterlade, um das nachvollziehen zu können, ist doch wohl glasklar.
... ist es offensichtlich nicht. Ich hatte aus genau dem Grund ursprünglich keine Code gepostet, weil mir meine Umsetzung viel zu komplex erschien, um konkret in den Code einzusteigen. Mir ist hier bis heute nicht klar, wie meine Fragen hier optimalerweise ausehen sollen. Ich versuche immer, mich auf das Wesentliche zu beschränken und das war aus meiner Sicht in diesem Fall eine möglichst allgemeine Beschreibung des Problems.
Wie hätte es in diesem Fall denn sein sollen?
beste gruesse,
heinetz-
Hi,
Mir ist hier bis heute nicht klar, wie meine Fragen hier optimalerweise ausehen sollen.
Auf jeden Fall so, dass das Problem damit nachvollziehbar wird.
Ich versuche immer, mich auf das Wesentliche zu beschränken
Wenn du dabei irgendwelche JavaScript-Ressourcen einbindest, die uns aber nicht vorliegen, und der Code per Copy&Paste getestet dann außer JavaScript-Fehlermeldungen eigentlich gar nichts liefert - dann ist das wohl kaum hilfreich, dein Problem zu verstehen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
hi,
* Dass du dich geschnitten hast, wenn du annimmst, dass ich mir sämtliche darin eingebundenen Scripte jetzt selber runterlade, um das nachvollziehen zu können, ist doch wohl glasklar.
entschuldige die Störung. Danke für die Anregung:
Tatsächlich war der Code viel zu umfangreich und beim reduzieren stellte sich heraus, dass der IE sich hier garnicht eigenartig verhielt, sondern das Plugin für den IE6 einen zweiten iframe ohne Inhalt im DOM generiert und der hatte, weil ohne Inhalt die Browserhintergrundfarbe ...
Nur zu dumm, dass ich keine Ahnung habe, wie ich mir den per JS generierten Code im IE6 ansehen kann ...
beste gruesse,
heinetz-
Hi,
Nur zu dumm, dass ich keine Ahnung habe, wie ich mir den per JS generierten Code im IE6 ansehen kann ...
Der Ersteller des IETesters bietet mit der DebugBar auch ein Tool an, mit dem man in älteren IE wenigstens einen halbwegs brauchbaren DOM-Inspector bekommt.
document.body.innerHTML ausgeben lassen, bspw. in eine zu diesem Zweck ins Dokument gehängte Textarea, so dass man es da rauskopieren und im Editor in Ruhe betrachten kann, ist manchmal auch hilfreich.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
Om nah hoo pez nyeetz, heinetz!
unter Wasser ist's halt dunkler ;-)
Matthias
--
1/z ist kein Blatt Papier.