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.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    transparent PNGs in ie6

    Hi All,

    I wonder if someone can help.

    the transparent pngs are not working in my site when viewed in ie6. I am using a jQuery plugin and I notice that the plugin uses different pngs in ie6 via an ie6 stylesheet. I also have an ie6 stylesheet, I just need the right pngs :-) How have they created their pngs?

    my site http://www.cranihum.com

    plugin from this site http://spritely.net/

    (you will notice I have some other layout problems in ie6, but I am trying to resolve them myself by looking at http://www.positioniseverything.net/explorer.html)

    However I couldn't find a good answer with the pngs

    Thank you

    Will

  • #2
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Transparent PNGs just simply aren't supported in IE6--it's an archaic browser. Unless IE6 support is an explicit design requirement, I wouldn't worry about it. If it is important, you will probably just have to create images where the "transparent" parts match the color of the background on which they will be placed.
    -- </byuhobbes>

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you for your reply, that's what I thought at first but http://spritely.net/ works in ie6 with transparent backgrounds.

    It has a special stylesheet:

    http://spritely.net/styles/ie6.css

    which contains some code linking to a png created for ie6.

    Code:
    #bird {
    	background-image: url(/images/ie6-bird-forward-back.png);
    http://spritely.net/images/ie6-bird-forward-back.png

    How have they got this to work?

    Thanks

    Will

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Using the power of javascript and some hacky coding. You technically can get png transparency to work in IE6, its just a hassle, a pain, and doesn't always work. Just googling "png transparency in ie6" gives me more results then I could use.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yeah, I will look a bit further, most talk about using proprietary filter called the AlphaImageLoader
    Code:
    	background: none;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
    I notice that spritely.net does not use that exclusively, in fact the moving elements, the sprites, do not use it. I will investigate further how they work.

    Thank you for your reply

    Will

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Look into supersleight – also available as jQuery plugin.

    However, transparent PNGs can’t effectively be used as sprites in IE6 since the filter method it is using always applies the entire image to the element without the option to position it explicitly (will always be at top left).


  •  

    Posting Permissions

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