...

View Full Version : Tried 3 PNG Fixes but no luck. IE6.



colinkites2000
08-25-2008, 07:47 PM
Good Day,

Nav bar is slowly coming along. Now I believe I just need to fix the png issue. I've tried a few different fixes but nothing seems to have an effect. Can anyone provide some insight? Do they need to be a special type of PNG for the hacks/fixes to work?

http://029c92a.netsolhost.com/brushes.html

This is only a problem in IE6 but most of the visitors use IE6!

Best Regards,
Colin

tommo77funk
08-25-2008, 07:50 PM
hi colin,

try this in the head section, it worked for me :)

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->


regards,


tom

FWDrew
08-25-2008, 07:53 PM
Hi there,

What fixes have you tried?

Be sure to read the causes and effects in this article, then try using the "super sleight" script at the bottom, you'll find all the instructions on the site:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Regards,

Drew

colinkites2000
08-25-2008, 08:23 PM
Hi Drew,

Thanks for your help. I have tried the twinhelix.com fix as well as a fix from bioneural.net plus another which I forget the name of now.

I applied the fix you suggested but still, it has no effect on my images. It is in place now, could you take a look and perhaps shed some light? All images still have background. Specifically, I'm working on the images in my main table but also in the left nav bar. All of those little logos have transparent png backgrounds.

http://029c92a.netsolhost.com/brushes.html

Best,
Colin

colinkites2000
08-25-2008, 08:24 PM
Hi Tom,

Thanks for your reply - I would try it but there are some happy faces in the code! Could you remove them somehow for me ??

Best,
Colin

BoldUlysses
08-25-2008, 09:06 PM
Another testament to the appropriateness of the &#91;CODE&#93;&#91;/CODE&#93; tags. Here you go:


<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

colinkites2000
08-26-2008, 02:20 PM
Well, this fix has gotten me pretty close. But it created 2 other issues, in IE6.

1. In my left navigation bar, the sub menu pngs are missing completely.
2. The alignment of the pngs in the left nav bar is off.

http://029c92a.netsolhost.com/brushes.html

Can anyone advise how to solve this?

Best Regards,
Colin

Donkey
08-26-2008, 02:30 PM
I found a similar problem.

It is because you are resizing your pngs in the html. IE6 doesn't shrink the image it just cuts out a bit of it that is the size your html calls for.

You need to re sample the images in your graphics program so that they are the same size as you state in the html.

abduraooft
08-26-2008, 02:48 PM
Hi Tom,

Thanks for your reply - I would try it but there are some happy faces in the code! Could you remove them somehow for me ??

Best,
ColinLol, people forget to follow the Sticky(in Javascript forum) : Please format code in your posts using the
tag! (http://www.codingforums.com/showthread.php?t=82672)

Colin, just click on the "Quote" button under that post, to get the correct code.

colinkites2000
08-26-2008, 03:03 PM
Hi Donkey,

Thanks for your help. I know this is not in the realm of CSS but when I resize my icon images in photoshop to my icon size (18 x 18), I lose the look of it. Somehow the html resizes it better. Are you fairly certain that this html resizing is my problem?

Best,
Colin

Donkey
08-26-2008, 04:43 PM
Yes I had the same problem and it worked for me. I'm surprised that you loose quality, I don't use photoshop myself I use Corel Photopaint, with that you can re-sample to the correct size and dpi and the re-samped image is always better than using a big image and forcing it smaller with html.


You might find that some of those line drawing style images would be just as good as a transparent gif.

BoldUlysses
08-26-2008, 04:57 PM
Do you have access to the original image or can you recreate it from scratch? Trying to resize a lossless bitmapped image format like a PNG or a GIF is going to be problematic. I keep two copies of most every image file I use: a Photoshop PSD with all the original information, effects, filters, type, etc; and the output file, whether it be a JPG, PNG or GIF. If I need to alter the outputted file I start at the PSD and go from there.

Also, you might be expecting too much from your image format. PNGs and GIFs are great for transparencies and images with simple gradients and few colors; JPGs shine when it comes to small(ish) photo textures and quality--asking one image format to do alpha-channel transparency like a PNG as well as thousands of colors and be a reasonable filesize might be a bit much.

Donkey
08-26-2008, 05:02 PM
Another point, those 18 x 18 drawings are very small to the point that if you didn't have the written description I wouldn't have a clue what they were.
You seem to have plenty of room there so why not make them bigger?

colinkites2000
08-29-2008, 03:08 PM
EDIT: I've now applied the TwinHelix fix and things are working well in the navbar situation BUT I still have a problem that is screwing up the page layout. My main content column is dropping down.... Any ideas on how to resolve?


Notes on the resizing below just in case someone else has the same problem.



It turns out I was using a bi-cubic resample (the default) which caused most of the image to disappear. Anyway, I resized to 18 x 18 for the images on the side bar (same size outlined in the HTML markup) and still no luck with IE6. It's strange, a couple of the images are transparent and a couple are not. Using the Unit PNG fix which is applied now, my entire content gets pushed down a fair ways, some images are transparent on the side, others are not, among other problems. I'm going to try a couple other fixes and see if they work now with the images resized. Any other thoughts would be greatly appreciated.



Yes I had the same problem and it worked for me. I'm surprised that you loose quality, I don't use photoshop myself I use Corel Photopaint, with that you can re-sample to the correct size and dpi and the re-samped image is always better than using a big image and forcing it smaller with html.


You might find that some of those line drawing style images would be just as good as a transparent gif.

colinkites2000
08-29-2008, 03:10 PM
Thanks for the feedback on this. I may make them bigger. In smaller resolutions, they appear larger and are a little more recognizable. I will experiment with the size of them... after I get the layout and transparency issue sorted.


Another point, those 18 x 18 drawings are very small to the point that if you didn't have the written description I wouldn't have a clue what they were.
You seem to have plenty of room there so why not make them bigger?

colinkites2000
08-30-2008, 03:25 PM
Resized as per your suggestion Monkey and everything worked perfectly. Thanks for your help!!!! Now, back to resizing. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum