Transparecy in IE

User 285557 Photo


Trial User
48 posts

OK hire goes,

I need some code, js , or something that really work... and fixing PNG transparency in IE 5.5 and 6.0...
In past two days I find there on the web several scripts, but they don't work...

Any suggestion...
User 355448 Photo


Ambassador
3,144 posts

Bojan,

I don't know of any IE issues with transparency, but then I prefer to use Firefox.

If you want to make a PNG file transparent, you need to use a graphics program such a PhotoShop or GIMP (there are many others).

There are more than one type of transparency that you may be asking about. There is the transparent background on an image, and there is the transparency of the image itself. Which one are you referring to? Can you provide a link to the graphics and explain what it is you want it to do?
User 285557 Photo


Trial User
48 posts

Hi Billr,

My question was about PNG image transparency on the web page... There is no link to this, it's offline work...

I use Firefox to.. but there are people on the web and they prefer IE (old version like 6 or 5.5) so if you look your site with those browsers you will be able to see what is my problem ( You must poses transparent PNG images on your web to see my problem) IE old version create gray background on transparent PNG and that destroy all work... In new version IE7 this problem is fixed but old version they are trouble...

I found some js script on the net, but they don't work properly and I decide for this kind of help...To heads are better then one in this case 1000 heads...

Thanks for reply...
User 463058 Photo


Ambassador
1,073 posts

Different methods work for different cases. It's impossible to help without seeing the html and css.
User 355448 Photo


Ambassador
3,144 posts

Bojan,

I used IE6 to test a transparent image, and transparent background with a .png file, and it worked. Sometimes things work differently on the web page than they do on our computers.

Try creating a directory on a site that you can use for testing. Maybe name it test01, then upload your page, images, etc. and check it out. Maybe you could have a file located at www.yoursite.com/test01/index.html and see how it actually works.
User 463058 Photo


Ambassador
1,073 posts

Hi Bill,

Was that an 8bit PNG or a 32bit PNG (24bit color + 8bit alpha channel)?

Here are a couple pages showing the limitations of IE 6:

http://entropymine.com/jason/testbed/pngtrans/

http://web.ncf.ca/bh447/pngdemo/

For this place holder title I used an 8bit png with alpha transparency. A glow is visible in other browsers, but not IE6.

http://www.solsector.com/cary/
User 285557 Photo


Trial User
48 posts

first I want to apology to all, my question isn't complete
Problem is in 24-bit TRANSPARENT PNG images..


Cery
I test different things before publishing, and if you write basic img tag into HTML editor and try to view 24-bit transparent png image with IE 6 this problem will appear on your screen. So in this moment I can't provide any online preview...

Billr
Yes I know that preview offline and online isn't same..for that I use two different computers... I can be wrong but, 24-bit in photoshop created PNG images have displaying problem in older IE version...
If you search little web with kaywords like "FIX PNG TRANSPARENCY IN IE" you will see...
User 355448 Photo


Ambassador
3,144 posts

Bojan,

I see what you are talking about. I don't know what the solution would be. The page with the bird and sun does not work at all with IE6.

Maybe asking some graphic experts would be worthwhile.
User 463058 Photo


Ambassador
1,073 posts

Бојан Србија (Bojan) wrote:
I test different things before publishing, and if you write basic img tag into HTML editor and try to view 24-bit transparent png image with IE 6 this problem will appear on your screen. So in this moment I can't provide any online preview...

One possible solution might be to turn the embedded image into a background image, so if you had this...

<img src="sample.png" width="568" height="189" alt="">

...you could use a div like this instead:

<div id="png1"></div>

Then you can apply the image as a background with this stying:

#png1 {
height:189px;
width:568px;
background:url("sample.png") 0 0 no-repeat;
}

You can then follow that with this styling which only IE 5 and 6 can see:

* html #png1 {
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.png', sizingMethod='image');
}
User 463058 Photo


Ambassador
1,073 posts

Here's a link for more info about the above code:
http://reference.sitepoint.com/css/filter

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.