CSS Transzparenz von Divs + PNGs im IE

Zhen · 22. Dezember 2010

Hallo Leute,
ich hätte da mal ne Frage.

Momentan bin ich dabei ne Galerie zu programmieren (in jQuery) bei der eben 4 Ebenen sich ein kleines Stück überlagern und (bis auf die oberste) alle transparent sind!
In diesen Ebenen sind die Galerie Bilder enthalten die dann durch "padding-left: 10 px" etwas nach links verschoben werden.

Außerdem bekommen die Ebenen ein "background-image" das genau 10 px breit ist und sich NICHT wiederholt. Dieses Image ist im png format und halbwegs durchsichtig (soll nämlich so nen schatten darstellen). Die Transparenz von dem image beginnt bei 0% und endet bei glaub ich ca. 70% (wie ne art verlauf, bloß eben aus einer einzigen farbe und der transparenz).

Im Firefox funktioniert alles PERFEKT (wer hätte es auch anders gedacht

), auch im Opera läuft es super. Das einzige was Probleme macht ist eben dieser bes****** IE (egal ob 5, 6, 7 oder 8!!!).

Im IE funktioniert nämlich ENTWEDER nur die Transparenz von den Ebenen ODER die Transparenz vom PNG! Aber beides geht nicht! Wenn die drunter liegenden Ebenen nämlich Transparent sind und ich das PNG drüberlege, dann zeigt der mir statt dem durchsichtigen PNG nur nen schwarzen Balken an der NICHT transparent ist!!!

Sind die ebenen NICHT transparent und das PNG liegt drüber, dann wird das PNG richtig gerendert. Könnt ihr mir vielleicht weiterhelfen?

Der Code den ich für die Transparenz von den Ebenen und das Einfügen vom Bild benutze ist:

HTML:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../trans1.png') alpha(opacity=60); background: none;

ripuli-6 · 22. Dezember 2010

Haste mal den Link dazu? Und hast du es im 9er IE probiert? Der sollte eine umfangreiche Transparenzunterstützung mitbringen und die alten IEs sicherst Du mit einem Fallback ab. Probiere mal erstmal die Sache mit CSS3 umzusetzen und lege dann die jquery funktion drüber.

Zhen · 22. Dezember 2010

Ja das ding ist halt, dass es möglichst Browserübergreifend sein "muss".
Sprich auch für IE7 und IE8 geeignet.

Und soweit ich weiß unterstützen die 2 CSS 3 noch gar nicht, oder irre ich mich da?

PS: IE 9 hab ich nicht ausprobiert. Wie gesagt, es ist wichtig dass es im IE 7 und 8 funzt.

ripuli-6 · 22. Dezember 2010

Die beiden IEs (7+8) unterstützen CSS3 nicht, aber der 9er tut es in Teilen und die Beschreibung klingt danach, dass Du das auch einfach CSS3 lösen kannst, so dass es in Opera, Webkit und Mozilla Engines schonmal funktioniert und Du von da ausgehend, dann die Lösung auf die alten IEs zuschneiden kannst.

Hast Du mal ein Screenshot oder irgendwas, das Dein Problem etwas besser veranschaulicht? Denn im Moment klingt es so, als wäre das BG-Image überflüssig, da ein Verlauf auch mit einer jquery-Funktion zu lösen sein müsste.

Zhen · 22. Dezember 2010

Hier sind die Screens.

Naja wie gesagt. Es funktioniert in jedem Browser optimal. Hab ja keine Probleme, aber im IE 7 und 8 eben nicht. Es ist aber wichtig dass es AUCH im IE 7 UND IE 8 funktioniert.

Da hilft mir CSS 3 aber auch nichts bei denen zweien und für die anderen Browser muss ichs ja nicht mehr anpassen, weils ja läuft (da hat mir css2 völlig gereicht

).

Mister Blue Sky · 22. Dezember 2010

Eine einfache Lösung: Conditional comments

Code:

<head>

<style type="text/css">
/*<![CDATA[*/
.top {background:url(top.[COLOR="Blue"]png[/COLOR]);}
.bot {background:url(bot.[COLOR="Blue"]png[/COLOR]);} 
/*]]>*/
</style>

<title>test</title>

<!--[if lte IE 6]><style>
.top {background:url(top.[COLOR="Red"]gif[/COLOR]);}
.bot {background:url(bot.[COLOR="Red"]gif[/COLOR]);}
</style><![endif]-->

</head><body>

BS

Zhen · 22. Dezember 2010

würd ja gern gif dateien verwenden, hab es auch ausprobiert gehabt. Aber leider wird der schatten dann nicht richtig dargestellt! Da ist er dann auf einer Seite aber durchsichtig und auf der anderen überhaupt nicht. da gibts dann keine halbtransparenz.

Mister Blue Sky · 22. Dezember 2010

Ich mein nicht anstatt, sondern sowohl als auch. [die GIFs eben als Notlösung* für alte IEs].
"Halbtransparenz" ist mit GIFs möglich* - Beispiel [mit obigem Code]:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
*       {font-family:verdana, sans-serif; font-size:13.4px;}
#side   {position:absolute; top:30px; left:20px; width:70px;}
.cont   {width:50px; position:relative; margin:10px;}
.in     {width:50px; height:100px; padding:10px; overflow:auto;}

.top    {position:absolute; height:40px; width:100%; top:0; left:0;
 background:url(top.png);}
.bot    {position:absolute; height:40px; width:100%; bottom:0; left:0; 
background:url(bot.png);} 

#side   {border:1px solid black;}
p       {border:1px solid red;}
.top    {border:1px solid lime;}
.bot    {border:1px solid blue;}
/*]]>*/
</style>


<title>test</title>

<!--[if lte IE 6]><style>
.top {background:url(top.gif);}
.bot {background:url(bot.gif);}
</style><![endif]-->

</head><body>

<div id="side">
<div class="cont">
<div class="top"></div><div class="bot"></div>

<div class="in">

<script type="text/javascript">
//<![CDATA[
for (var i = 1; i <= 9; i++)
  document.write("<p>"+ i +"<\/p>");
//]]>
</script>

</div></div></div>

</body></html>

[x.zip -> 4 Grafiken -> ins selbe Verzeichnis extrahieren]

Also kurz, ich denk, das sich Dein Problem eher über die Grafiken* lösen lässt.

BS

Zhen · 22. Dezember 2010

Also bei dem Code oben zusammen mit den Bildern kommt bei mir nur das auf dem Screenshot rauß!!

Mister Blue Sky · 22. Dezember 2010

Ja passt - sollte ja auch nur die Demonstration [verdeutlicht durch die Scroll-Funktion] einer Transparenz [die auch mit dem IE klappt] sein.

BS

Zhen · 23. Dezember 2010

Ok viele Dank. Werd mal sehen was ich da machen kann

Hätte aber noch ein anderes Problem. Vielleicht kann mir da auch jemand helfen

Ebenfalls zu dieser Galerie.

Das Problem selber ist in dem Thread "[Javascript] [jQuery] Animation im IE7" geschildert.
Hoffe da finden sich leute die mir auch bei dem Problem helfen könnten.

Bin bisland nämlich echt ein noob in sachen Programmierung. Ganz besonders in Javascript. PHP gehts ja noch =D

Suche

CSS Transzparenz von Divs + PNGs im IE

Zhen

Lt. Junior Grade

ripuli-6

Lt. Junior Grade

Zhen

Lt. Junior Grade

ripuli-6

Lt. Junior Grade

Zhen

Lt. Junior Grade

Anhänge

Mister Blue Sky

Gast

Zhen

Lt. Junior Grade

Mister Blue Sky

Gast

Zhen

Lt. Junior Grade

Anhänge

Mister Blue Sky

Gast

Zhen

Lt. Junior Grade

Ähnliche Themen