SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    replace all .png with .gif but only on <= ie6

    I use some .pngs on a website which on ie6 and lower look ugly.

    if I were to make an equivalent gif for each png, I would want to redirect all ie (6 and lower) users to the gifs.

    this would be easy with a mod_rewrite but since that has to happen before the content reaches the user, theres no way to tell if the user agent is ie or not....so I am thinking this has to be done with javascript?

    is there a way?

    Thanks!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use Microsoft's conditional comments to target a script at ie <= 6. The script could then find all image tags and replace any ending in .png with their .gif equivalents.
    Code:
    <!--[if lte IE 6]>
    <script type="text/javascript" src="myScript.js"></script>
    <![endif]-->
    Take a look at
    http://24ways.org/2007/supersleight-...ent-png-in-ie6

  3. #3
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the images are all in your CSS you can use a conditional stylesheet like this
    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="http://example.com/css/ie6.css" type="text/css" />
    <![endif]-->
    You can have this stylesheet map all images used to the gif version rather than the png

    This won't work with image tags, just background-images.

    edit: @r51 Oh, I didn't know that worked for javascript too. Good to know!

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @busy
    Yes, the content can be any html you want to aim at particular versions of IE.

  5. #5
    SitePoint Enthusiast benno23's Avatar
    Join Date
    May 2008
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are your png's appearing with an ugly grey background in ie6?
    You could always use this solution to fix the png's instead. Save you some effort that way.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Unless you're converting a huge, existing website, I wouldn't bother loading yet another script onto a page just for IE6 to see png's. In the CSS stylesheet, everywhere you have the png set as background, do a Holly hack for the gif:
    Code:
    #element {
      background: url(awesometransparency.png) 0 0 no-repeat;
    }
    
    * html #element {
      background: url(crapola.gif) 0 0 no-repeat;
    }
    I've also seen the shorter version:
    Code:
    #element {
      background: url(awesometransparency.png) 0 0 no-repeat;
     _background: url(crapola.gif) 0 0  no-repeat;
    }
    However this isn't valid and while it saves a line, I find the Holly version safer.

    If you insist on using something like PNGfix though, know that you still don't want to use it with links-- if you have transparency in a menu, for instance, many people can't click the links in IE6. I'm not sure why this is or if it's been fixed, but it's a problem you should be aware of.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this instead of replacing images: http://www.twinhelix.com/css/iepngfix/

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Does that one let you click links, Dan? That and not adding scripts were my two reasons not to use PNGfix.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't use PNGs in links so I wouldn't know first-hand.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    With at least the older version of PNGFIx, people who used it in menus ran into an unclickable links issue. After hearing horror stories, I abandoned all thought of PNGFIX (even though I also have not yet done a see-through menu).

  11. #11
    SitePoint Enthusiast benno23's Avatar
    Join Date
    May 2008
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used both the PNGfix I linked to and the one Dan linked to.
    Links using the png's still worked. I have heard of them not working--but I think
    only if you use tables--or something like that. I've never seen the problem first hand though.

    My arguments for using a PNGfix: a) You can use png with ie instead of a gif. b) Less work.


Bookmarks

Posting Permissions

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