Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Transparent PNG in IE6

Posted on 2006-05-25
6
Medium Priority
?
837 Views
Last Modified: 2008-02-01
I'm building a website that uses transparent PNGs--a very typical problem nowadays. This is my problem, though: I use transparent PNG images BOTH in <img> tags and with the CSS property "background-image" and I need ALL of them to properly handle alpha channels. There's plenty of code available for handling the <img>s, but I need something that will handle the background images as well. And using GIFs as alternatives for IE users is NOT an option because they are not simply laying on top of solid colors; they are on top of some complex, non-transparent background images and the fuzzy white stuff that surrounds GIFs simply would not do. Thanks.
0
Comment
Question by:soapergem
  • 3
  • 2
6 Comments
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 2000 total points
ID: 16762539


This might help:  

"IE7(really bad name) is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6 (learn more)."

http://dean.edwards.name/IE7/compatibility/png.html


Good Luck!!!
0
 
LVL 3

Expert Comment

by:Onyx23
ID: 16762717
This ios really good!

PNG in Windows IE: How To Use!

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Hope this helps
0
 
LVL 6

Author Comment

by:soapergem
ID: 16763214
Onyx23, look at the code you posted. It does not handle PNGs embedded by the background-image attribute whatsoever. 0h4crying0utloud, I'll try your's out. And you're right, "IE7" is really a terrible name.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Expert Comment

by:Onyx23
ID: 16763332
"Onyx23, look at the code you posted. It does not handle PNGs embedded by the background-image attribute whatsoever"

I am afraid you are mistaken I have used this fix NUMEROUS times for embedded backgrounf PNG files.

If you used the file and script it DOESN'T MATTER  where you place your PNGS, embedded or not.

Just TRY it if you don't believe me.
0
 
LVL 6

Author Comment

by:soapergem
ID: 16763705
No it doesn't! And for reference, I DID try it out before responding.

Don't believe me? Examine this:
http://sayid.asmallorange.com/~gmyers/test/test.html

IE6 Screenshot:
http://img49.imageshack.us/img49/3207/png6dd.gif

It handles the first image fine, since it's in an <img> tag, but the second fails--as would be expected. Look at this--some of the source code from pngfix.js:

   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]

As far as I know, the document.images object only references those images called from <img> tags.
0
 
LVL 6

Author Comment

by:soapergem
ID: 16764027
0h4crying0utloud, once I realized that the IE7 looks for images ending in "-trans.png" by default, it worked like a charm. Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

575 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question