Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts

    Question Tried 3 PNG Fixes but no luck. IE6.

    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

  • #2
    New Coder
    Join Date
    Mar 2008
    Posts
    17
    Thanks
    1
    Thanked 1 Time in 1 Post
    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 + ";"
    + "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    }
    window.attachEvent("onload", correctPNG);
    </script>
    <![endif]-->


    regards,


    tom

  • Users who have thanked tommo77funk for this post:

    colinkites2000 (08-26-2008)

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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-...ent-png-in-ie6
    Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Another testament to the appropriateness of the &#91;CODE&#93;&#91;/CODE&#93; tags. Here you go:

    Code:
    <!--[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]-->
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    colinkites2000 (08-26-2008)

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts

    Closer....

    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

  • #8
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    colinkites2000 (08-30-2008)

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by colinkites2000 View Post
    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
    Lol, people forget to follow the Sticky(in Javascript forum) : Please format code in your posts using the [code][/code] tag!

    Colin, just click on the "Quote" button under that post, to get the correct code.
    Last edited by abduraooft; 08-26-2008 at 02:54 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    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
    Last edited by colinkites2000; 08-26-2008 at 03:08 PM.

  • #11
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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.
    Last edited by Donkey; 08-26-2008 at 04:46 PM. Reason: Another thought.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    colinkites2000 (08-30-2008)

  • #12
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    colinkites2000 (08-30-2008)

  • #13
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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?
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    colinkites2000 (08-30-2008)

  • #14
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    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.


    Quote Originally Posted by Donkey View Post
    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.
    Last edited by colinkites2000; 08-29-2008 at 06:04 PM.

  • #15
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    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.

    Quote Originally Posted by Donkey View Post
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •