Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

PNG cross browser issue

Featured Replies

:clapping: hello,

I have a problem about PNG image transparent on IE6, I try to search on google and try some solutions.

However it doesn't work. Anyone can help me... - _ - "

Here is my site thailand-webdesign.net

Tnx for you help ^^

  • 4 weeks later...

IE6 cant handle PNG. it leave like a white mark.

 

The best thing to do is use a gif or jpeg but.

 

gif have a white border round everything if u use transparancy so if its on white then you are ok.

 

if not you have to do exact placement. copy part of the back ground and the over image. it is the only way till IE6 is trully gone

gifs or jpgs not always possible. There is javascript that can make .pngs transparent, but it won't work on repeated background .pngs

 

(And gifs don't have a white border unless you've got matte on when saving)

  • 3 weeks later...
gifs or jpgs not always possible. There is javascript that can make .pngs transparent, but it won't work on repeated background .pngs

 

(And gifs don't have a white border unless you've got matte on when saving)

 

Create a replacement gif for all the horrble internet users that dont update their browser, and then use an exception rule (like !important) to show a lovely transparent png file to those who install their updates.

  • 3 weeks later...

As steammultimedia said, IE6 can't handle PNG. Because I hate Gif :D I either use a png fix for ie, you can find it here:

http://www.twinhelix.com/css/iepngfix/.

 

Or make the background behind the transparent object as the bg on your site. :) Thats the easiest way to fix it.

IE6 cant handle PNG. it leave like a white mark.

 

The best thing to do is use a gif or jpeg but.

 

gif have a white border round everything if u use transparancy so if its on white then you are ok.

 

if not you have to do exact placement. copy part of the back ground and the over image. it is the only way till IE6 is trully gone

 

You can play around with the matte colour to reduce or remove the border. If you are using a gradient on the edge of the image (say a drop shadow) then there will be little you can do to remove the 'border'.

All the facts should be given on png support for IE6.

 

When it comes down to it, you need to specify why type of png your referring to when you say IE6 doesnt support it. There are two basic kinds. png8 and png24. The difference is the bit depth. png8 is fully supported in IE6, while png24 which supports alpha transparency is not.

 

For some images, instead of using a straight gif, I would rather use a png8 because it compresses much better than a gif.

 

If your looking for a solution for support on png24 in IE6, look up the Dean Edwards IE7 hack. It should be noted that as far as I have searched (or created my own), I havent been able to solve the background-position support for png24 in IE6.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.