PNGs in IE

[daved2424]

I am using the Active X control to display a transparent PNG. It works, except for a thin line above the image and a small square in the top right of it.

http://holidaymaps.googlepages.com/world2.html

The image is contained like this:
<DIV>
<OTHER IMAGE />
<BR>
<PNG IMAGE />
</DIV>

The html I am using embeded in JavaScript is:

<div id=holder" style="height:250px; width:250px; filter:alpha(opacity=60); -moz-opacity: 0.60; opacity:0.60"><img id="pixel" src="pixel.jpg" height="' + (myHeight - 160) + '" width="' + myWidth + '" /><br><img id="gradient" STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'gradient.png\',sizingMethod=\'scale\');" height="60" width="' + myWidth + '" /></div>

Does anyone know what I am doing wrong?

[daved2424]

can anyone help me at all?

[QBall777]

Hi

The site is not displayed correctly in opera (all blacked out)

What browser are you using to view this in?

[daved2424]

this site is only being developed for FF and IE. The problems are occuring in IE.

[QBall777]

OK I think you must be looking at this through IE6 not the latest IE7

In IE7 your image is just a black box in the left corner.
IE7 is sizing your image as you requested it style="height:250px; width:250px;
Have you tried style="height:100%; width:100%;

[daved2424]

yes i am viewing in IE6 as i am on a corporate network that does not have IE7 installed yet. once i have this working in IE6 i will then start testing for IE7 at home.

those size values are the size of the div that the image is contained within. they are arbitary values for the moment as the content displayed within them will nearly always be bigger than those values.

the problem itself is getting the png to display properly. the transparancy works, but it still displays either a white or transparent line around the image and the little box you get top-left in an image before it has loaded. i am also experiencing the same problem with another png so im guessing that its my transparent png code thats wrong. i am using:

<img id="gradient" STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'graphic_gradient.png\',sizingMethod=\'scale\');" height="60" width="' + myWidth + '" />

myWidth being a variable calculated depending on window size.