Juan Di Diego 109

I found this article on how to create a Mega dropdown using jQuery. http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/. It works great, however when I customize the look of it and use a PNG as a background, it puts a black border around the image. This is happening in IE 6,7, and 8. I have tried many PNG fixes that I found on the web and nothing seems to be working. I know that PNG's work fine in IE 7 and 8, but it seems to not work when I involve jQuery into the mix.

2 answers

Juan Di Diego 109
0
points

Sorry I should have been more clear. It's not really a border, it turns any Transparent PNG image I use that has a shadow on it, and make it all black and not transparent. It doesn't render the transparent image well at all in IE6, IE7, and IE8

Answered over 8 years ago by Juan Di Diego
Gary Hepting 530
-1
points

You need to be exporting your PNG graphics as 24-bit with transparency and the appropriate canvas color in Photoshop and 32-bit in Fireworks.

Answered over 8 years ago by Gary Hepting
  • Want to post one of your PNG image files so I can double-check what I'm telling you? :) — Gary Hepting over 8 years ago
  • 8-bit PNGs only offer the same transparency as GIF files, for full alpha-transparency (suitable for fading/gradiated shadows) they should be 24 bit from Photoshop or 32 bit from Fireworks... — danwellman over 8 years ago
  • There's an app called TweakPNG that will take out the 'offending' data in your .png, namely the gAMA chunk, so it works in IE6 to 8. The site for the app: http://entropymine.com/jason/tweakpng/. Could you post your code so we can take a look? — tahdhaze09 over 8 years ago
  • you can also use PngOptimizer too, with added compression ;) http://psydk.org/PngOptimizer.php — danwellman over 8 years ago
  • Thanks for correcting my mistake there danwellman. I've corrected the information to be accurate. Cheers! — Gary Hepting over 8 years ago