Perpetuum: PNG Transparenz im IE bei verschachtelter Slideshow?

Beitrag lesen

SELF-Forum

PNG Transparenz im IE bei verschachtelter Slideshow?

Perpetuum Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo SELFHTML-Gemeinde,

momentan versuche ich eine Slideshow in einer Slideshow mittels jQuery und dem cycle-Plugin zu erstellen. Das sieht in etwas so aus (Beispiel-Seite):

Slideshow 1
  | Slide 1.1
    |- Slideshow
      |- Bild
      |- Bild
    |- Slideshow 1.1 Bild
  | Slide 1.2
  ...

In der inneren slideshow sind PNG Bilder mit transparentem Hintergrund.

Der Wechsel der inneren Slideshow funktioniert im IE7/8. Sobald aber ein Wechsel der Äußeren Slideshow durchgeführt wird, wird der transparente Hintergrund weiß angezeigt.

Die ganzen Fixes aus dem Stackoverflow-Thema habe ich schon versucht. Leider ohne Erfolg.

Weiß jemand vielleicht warum die Transparenz beim Wechsel der Äußeren Slideshow nicht funktioniert und wie man das Problem behben kann?

Viele Grüße
Perpatuum

PS: Mein HTML-Code sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
	<head>  
		<title>Test</title>  
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
		<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>  
		<script type="text/javascript">  
			$(document).ready(function(){  
				$('#outerSlideshow').cycle({delay: 1000, speed: 1000, timeout: 4000}); // ,cleartype: true, cleartypeNoBg: true  
				$('#innerSlideshow').cycle({delay: 1000, speed: 1000, timeout: 2000, cleartypeNoBg: true}); // , cleartype: true, cleartypeNoBg: true  
			});  
		</script>  
	</head>  
	<body>  
		<div style="position: relative;">  
			<div id="outerSlideshow" style="height: 600px; position: absolute; z-index: 0">  
					<div style="width="1200px; height: 600px">  
						<div id="innerSlideshow" style="height: 600px; position: absolute; top: 100px; left: 100px; z-index: 1;">  
							<div id="slide1">  
								<img src="slide_1.png" />  
							</div>  
							<div id="slide2">  
								<img  src="slide_2.png" />  
							</div>  
						</div>  
						<img src="bg_1.jpg" />  
					</div>  
					<div style="width=1200px; height: 600px;">  
						<img src="bg_2.jpg" />  
					</div>  
				  
			</div>  
		</div>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln