PDA

View Full Version : Black solid background instead of transparent?


nikee
Feb 23rd, 2010, 07:10 PM
Hello :)

I'm experiencing something I've never seen before. I have a PNG image, with 80% transparency. But when i view it in my browser it shows up 100% black. It's absolute positioned over another image. Any ideas?

Check it out:

CSS:

* {
margin: 0px;
padding: 0px;
border: 0px;
}

#slide-wrapper {
position: relative;
width: 400px;
height: 250px;
border: 1px solid #FFF;
margin: 15px;
overflow: hidden;
}

#slide-wrapper ul li .text {
position: absolute;
bottom: 0px;
height: 80px;
width: 400px;
background: transparent url(images/80.png) repeat top left;
z-index: 100;
}And my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" media="screen" rel="stylesheet" />
</head>

<body>

<div id="slide-wrapper">
<ul id="images">
<li>
<a href="#"><img src="slideshow-images/1.jpg" /></a>
<div class="text">text ett</div>
</li>
<li>
<a href="#"><img src="slideshow-images/2.jpg" /></a>
<div class="text">text två</div>
</li>
<li>
<a href="#"><img src="slideshow-images/3.jpg" /></a>
<div class="text">text tre</div></li>
<li>
<a href="#"><img src="slideshow-images/4.jpg" /></a>
<div class="text">text fyra</div>
</li>
<li>
<a href="#"><img src="slideshow-images/5.jpg" /></a>
<div class="text">text fem</div>
</li>
</ul>
</div> <!-- slide-wrapper -->
</body>
</html>And a screenshot of it:
http://i.imagehost.org/0609/Screenshot53.png

Am i missing something? What's wrong?

Thanks in advance,
-Nike
Excavator
Feb 23rd, 2010, 08:12 PM
Hello nikee,
What browser are you seeing this in? IE6 does not do .png very well - google pngfix (http://www.google.com/search?q=pngfix&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1).

If you're seeing this in better browsers like Firefox, we'll probably need a link to the test site so we can see the image.
nikee
Feb 23rd, 2010, 08:19 PM
Oh right, sorry. I forgot to mention that i'm using firefox. I have howerver viewed it in ie6, ie7 and ie8 (with ieTester), and in ie 6 and 7 the text element doesn't appear at all :o But it shows up in IE8, and it looks just like in Firefox, solid black!

Here's a link:
http://jbhstad.se/NicklasSandell/slideshow/
nikee
Feb 23rd, 2010, 09:05 PM
I just figured it out. It was as easy as removing "overflow: hidden". I then saw that all div's with the class "text" are stacked above eachother... since the .text class is absolute positioned, and the slide-wrapper div is relatively positioned. Just take a look at the example here (http://jbhstad.se/NicklasSandell/slideshow/) if you don't understand. :)

Thanks for the help though :D