issue with dynamic transparent pngs in IE6

I'm building a site which uses ajax and DHTML heavily to build a frontend. Th frontend has a lot of transparent PNGs for which I use the filter hack to display them in IE6. The issue arises when I'm building a new component in javascript which has transparent PNGs in it. If I build a new div and then position it using javascript the transparent pngs don't display at all !!
Has anyone else come across this ?

Cheers
Colm

protos1

Newbie Poster

6 posts since May 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Please post your code here so that will help to know is somthing wrong in it or not, I have used
transparent PNG and PNG Hack for IE 6 or less
and thats work fine, I don't know but without seen code I can't say whats going wrong...

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

4 Years Ago

Below is an example of my problem.

The page initially displays a header button and a div containing a price button which is built using two transparent pngs. The trasparent PNGs use the filter hack and it works fine on the initial page load.

Now if you mouseover the header icon the openDiv() function is called which basically uses javascript to construct another button with the same transparent pngs, and it replaces the first button with the second one. The problem is that the transparent pngs which the button is made of don't appear at all in IE6 !! It works fine in IE7 and firefox. Maybe the filter only gets applied when the page is initially loaded, I don't know. I was hoping someone here might know ?

Any ideas ?

Cheers
Colm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<link rel="stylesheet"  href="test_image.css" type="text/css" charset="utf-8"/>
	<script type="text/javascript">
		function openDiv()
		{
			var str = document.getElementById("button_template").innerHTML;
			var totStr = "";
			for (var k=0; k<1 ;k++ )
			{
				totStr += "<div style='display:block;padding-bottom:10px;color:green'>Colm &nbsp;&nbsp;&nbsp;"+str+"</div>";
			}
			document.getElementById('displayArea').innerHTML = totStr;
		}
	</script>
</head>
<body>
<table id="mainMenu">
	<tr>
		<td class="header_icons">
			<span>
				<img  onmouseover="openDiv()" height="57px" width="55px" src="games_active.png"/>
			</span>
		</td>
</tr>
</table>
<div id="displayArea" class="testStyle">
	<div style='display:block;padding-bottom:10px;color:green'>TESTTEST &nbsp;&nbsp;&nbsp;<div class="priceButton"><img src="infopoint.png" alt="play bar1" style="behavior: url(pngbehavior.htc);" class="priceButtonImage" width="20px" height="13px"></img><div class="priceButtonBg"><span class="mediaPrice">$100.00</span></div><img class="priceButtonRight" src="button_play_right.png" style="behavior: url(pngbehavior.htc);" width="6px" height="13px" alt="play bar"></img></div>
</div>

<div id="button_template" style="display:none">
	<div class="priceButton">
		<img id="testOpacity" src="infopoint.png" alt="play bar1" style="behavior: url(pngbehavior.htc);" class="priceButtonImage" width="20px" height="13px"></img><div class="priceButtonBg"><span class="mediaPrice">$10000.00</span></div><img class="priceButtonRight" src="button_play_right.png" style="behavior: url(pngbehavior.htc);" width="6px" height="13px" alt="play bar"></img>
	</div>
</div>
</body>
</html>

protos1

Newbie Poster

6 posts since May 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Hi Again,

I have tested your code in my case it was working fine i have used this PNG hack
http://www.twinhelix.com/css/iepngfix/ try this PNG hack maybe it will help you,

here is the page which i tested

http://www.katarey.com/forhelp/test.html

http://www.katarey.com/forhelp/demoPage.html

both pages tested and working fine in ie6 and 5.55

all the best
Rahul Dev Katarey

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

4 Years Ago

Hi Rahul,

Thanks for looking at this. I tried your code and it turns out the the htc script I was using for the transparency hack didn't work properly. I subsituted the one you use above and it worked fine.

Thanks for your help !

Cheers
Colm

protos1

Newbie Poster

6 posts since May 2006

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You