Conditional image swap for IE6?

Discussion in 'HTML' started by toxee, Nov 18, 2009.

  1. toxee

    toxee Guest

    <div class="pearl">
    <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    </div>

    <div class="pearl">
    <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    </div>

    Basically if the user is using something as old or older than IE6 I
    wanted it to use gif format instead of png format. How do I do this
    exactly?
     
    toxee, Nov 18, 2009
    #1
    1. Advertising

  2. toxee

    dorayme Guest

    In article
    <>,
    toxee <> wrote:

    > <div class="pearl">
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > <div class="pearl">
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > Basically if the user is using something as old or older than IE6 I
    > wanted it to use gif format instead of png format. How do I do this
    > exactly?


    The simplest thing, if you are really concerned, is to use gif all the
    time rather than png. Show me an example of your images where you are
    seeing such a great advantage of png over gif that you would be prepared
    to go to the trouble of making two images, loading them and having them
    on the server and making them available via conditional comments or
    whatever to different browsers...

    --
    dorayme
     
    dorayme, Nov 18, 2009
    #2
    1. Advertising

  3. toxee

    Nik Coughlin Guest

    "toxee" <> wrote in message
    news:...
    > <div class="pearl">
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > <div class="pearl">
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > Basically if the user is using something as old or older than IE6 I
    > wanted it to use gif format instead of png format. How do I do this
    > exactly?


    Because the PNG transparency looks bad with IE right? Super simple fix:

    http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-problem-with-ie6/
     
    Nik Coughlin, Nov 19, 2009
    #3
  4. toxee wrote:
    > <div class="pearl">
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > <div class="pearl">
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > </div>
    >
    > Basically if the user is using something as old or older than IE6 I
    > wanted it to use gif format instead of png format. How do I do this
    > exactly?


    <object type="image/png" data="pearl.png"><img src="pearl.gif"></object>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 19, 2009
    #4
  5. toxee

    BootNic Guest

    On Wed, 18 Nov 2009 14:39:32 -0800 (PST)
    toxee <> wrote:

    > <div class="pearl"> <img class="pearl" src="pearl.png" alt="Pearl
    > Davis Ministries" title="Pearl Davis Ministries"> </div>
    >
    > <div class="pearl"> <img class="pearl" src="pearl.gif"
    > alt="Pearl Davis Ministries" title="Pearl Davis Ministries">
    > </div>
    >
    > Basically if the user is using something as old or older than IE6
    > I wanted it to use gif format instead of png format. How do I do
    > this exactly?


    Lifecycle IE6/7 13-Jul-2010

    You may consider having the server redirect IE 6 request for selected
    png files to gif files.

    Browser sniffing you say, yes it is.

    I would not consider this to be important enough to modify the HTML,
    CSS or to use any form of JavaScript to cater to IE 6. It's simply not
    worth the effort in my opinion.

    An Apache RewriteRule to redirect IE 4-6 to gif images for peral.png,
    hangman.png, stool.png may look something like:

    RewriteCond %{HTTP_USER_AGENT} MSIE\s[4-6]
    RewriteCond %{REQUEST_URI} (pearl|hangman|stool)\.png$
    RewriteRule ^(.+)\.png$ $1.gif [L]



    --
    BootNic Wed Nov 18, 2009 08:50 pm
    You can turn painful situations around through laughter. If you can
    find humor in anything - even poverty - you can survive it.
    *Bill Cosby*

    â• 236 days remaining

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v2.0.12 (GNU/Linux)

    iEYEARECAAYFAksEpHUACgkQmo2774GZ7qn+YwCglJKNUNs84ufYel1GXUC8ubVI
    1XAAoPEwekImU8W1btPnyWP7dcojiVBT
    =YwmX
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 19, 2009
    #5
  6. toxee

    toxee Guest

    On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > "toxee" <> wrote in message
    >
    > news:...
    >
    > > <div class="pearl">
    > > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > > title="Pearl Davis Ministries">
    > > </div>

    >
    > > <div class="pearl">
    > > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > > title="Pearl Davis Ministries">
    > > </div>

    >
    > > Basically if the user is using something as old or older than IE6 I
    > > wanted it to use gif format instead of png format. How do I do this
    > > exactly?

    >
    > Because the PNG transparency looks bad with IE right?  Super simple fix:
    >
    > http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...


    So many suggestions in this thread already, thanks guys! Yes, it's to
    avoid that hideous background for my transparent image of the client.
    I see three different methods on that page, I'm not sure how I
    implement any of the techniques though. Like where in my code would
    they go. If I used the second method the class is,

    img.pearl{

    }

    If it goes in the html portion of my page, where?
     
    toxee, Nov 19, 2009
    #6
  7. Gazing into my crystal ball I observed toxee <>
    writing in news:27eb79ac-cb0b-4d55-a531-be634515d845
    @d9g2000prh.googlegroups.com:

    ><div class="pearl">
    ><img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    ></div>
    >
    ><div class="pearl">
    ><img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    ></div>
    >
    > Basically if the user is using something as old or older than IE6 I
    > wanted it to use gif format instead of png format. How do I do this
    > exactly?
    >


    I use two different stylesheets, one for IE < 7 and one for the rest of
    the world. The only thing that is in the IE sheet is the necessary
    images, eg:


    style_ie.css
    #header {background-image: url(logo.gif);}

    style.css
    #header {background-image: url(logo.png);/*other rules*/}

    Then I do this in the head:
    <link type="text/css" rel="stylesheet" href="style.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="style_ie.css" />
    <![endif]-->


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 19, 2009
    #7
  8. toxee

    Nik Coughlin Guest

    "toxee" <> wrote in message
    news:...
    On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    >
    > Because the PNG transparency looks bad with IE right? Super simple fix:
    >
    > http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...
    >
    > So many suggestions in this thread already, thanks guys! Yes, it's to
    > avoid that hideous background for my transparent image of the client.
    > I see three different methods on that page, I'm not sure how I
    > implement any of the techniques though. Like where in my code would
    > they go. If I used the second method the class is,


    Use the first method, the pngquant one. You have to download the program and
    run it from the command line, but it's pretty easy. You end up with an
    indexed alpha png, which compliant browsers will display much like your
    current png files, and which IE 6 and below will display with binary
    transparency, ie like a GIF does, so it's win-win and you don't have to
    change your code. You just have to run your png's thru that program is all.
    Almost all PNGs will still look OK afterwards, if not use one of the other
    methods.
     
    Nik Coughlin, Nov 19, 2009
    #8
  9. toxee

    toxee Guest

    On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > "toxee" <> wrote in message
    >
    > news:...
    > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    >
    >
    >
    > > Because the PNG transparency looks bad with IE right? Super simple fix:

    >
    > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > So many suggestions in this thread already, thanks guys! Yes, it's to
    > > avoid that hideous background for my transparent image of the client.
    > > I see three different methods on that page, I'm not sure how I
    > > implement any of the techniques though. Like where in my code would
    > > they go. If I used the second method the class is,

    >
    > Use the first method, the pngquant one. You have to download the program and
    > run it from the command line, but it's pretty easy.  You end up with an
    > indexed alpha png, which compliant browsers will display much like your
    > current png files, and which IE 6 and below will display with binary
    > transparency, ie like a GIF does, so it's win-win and you don't have to
    > change your code.  You just have to run your png's thru that program is all.
    > Almost all PNGs will still look OK afterwards, if not use one of the other
    > methods.


    I see what you mean, I didn't know that exe was a converter. Photoshop
    can save images in png8, I tried it and it looked just as jaggy as the
    gif format. So is that what the program does, just convert it the same
    way photoshop would?
     
    toxee, Nov 19, 2009
    #9
  10. toxee

    Nik Coughlin Guest

    > "toxee" <> wrote in message
    > news:...
    > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > "toxee" <> wrote in message
    > > news:...
    > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > Because the PNG transparency looks bad with IE right? Super simple fix:
    > >
    > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    > >
    > > > So many suggestions in this thread already, thanks guys! Yes, it's to
    > > > avoid that hideous background for my transparent image of the client.
    > > > I see three different methods on that page, I'm not sure how I
    > > > implement any of the techniques though. Like where in my code would
    > > > they go. If I used the second method the class is,

    > >
    > > Use the first method, the pngquant one. You have to download the program
    > > and
    > > run it from the command line, but it's pretty easy. You end up with an
    > > indexed alpha png, which compliant browsers will display much like your
    > > current png files, and which IE 6 and below will display with binary
    > > transparency, ie like a GIF does, so it's win-win and you don't have to
    > > change your code. You just have to run your png's thru that program is
    > > all.
    > > Almost all PNGs will still look OK afterwards, if not use one of the
    > > other
    > > methods.

    >
    > I see what you mean, I didn't know that exe was a converter. Photoshop
    > can save images in png8, I tried it and it looked just as jaggy as the
    > gif format. So is that what the program does, just convert it the same
    > way photoshop would?


    No, the only similarity is that it converts the png to an indexed image, but
    when using pngquant the palette can also include colours with alpha
    transparency (varying degrees of opacity), so you still get the ability to
    antialias edges of the image against any background as you do with a 24 or
    32 bit PNG.

    Modern browsers display these correctly, without jaggies, and IE 6 throws
    away the pixels that are alpha transparent, which makes the image look jaggy
    like a gif
     
    Nik Coughlin, Nov 19, 2009
    #10
  11. toxee

    toxee Guest

    On Nov 18, 8:47 pm, "Nik Coughlin" <> wrote:
    > > "toxee" <> wrote in message
    > >news:....
    > > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > > "toxee" <> wrote in message
    > > >news:....
    > > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > > Because the PNG transparency looks bad with IE right? Super simple fix:

    >
    > > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > > > So many suggestions in this thread already, thanks guys! Yes, it's to
    > > > > avoid that hideous background for my transparent image of the client.
    > > > > I see three different methods on that page, I'm not sure how I
    > > > > implement any of the techniques though. Like where in my code would
    > > > > they go. If I used the second method the class is,

    >
    > > > Use the first method, the pngquant one. You have to download the program
    > > > and
    > > > run it from the command line, but it's pretty easy. You end up with an
    > > > indexed alpha png, which compliant browsers will display much like your
    > > > current png files, and which IE 6 and below will display with binary
    > > > transparency, ie like a GIF does, so it's win-win and you don't have to
    > > > change your code. You just have to run your png's thru that program is
    > > > all.
    > > > Almost all PNGs will still look OK afterwards, if not use one of the
    > > > other
    > > > methods.

    >
    > > I see what you mean, I didn't know that exe was a converter. Photoshop
    > > can save images in png8, I tried it and it looked just as jaggy as the
    > > gif format. So is that what the program does, just convert it the same
    > > way photoshop would?

    >
    > No, the only similarity is that it converts the png to an indexed image, but
    > when using pngquant the palette can also include colours with alpha
    > transparency (varying degrees of opacity), so you still get the ability to
    > antialias edges of the image against any background as you do with a 24 or
    > 32 bit PNG.
    >
    > Modern browsers display these correctly, without jaggies, and IE 6 throws
    > away the pixels that are alpha transparent, which makes the image look jaggy
    > like a gif


    Ah I see, I it does work a bit better as there is no nasty outlines,
    but the quality is pretty rough. The image ended up having holes in it
    it was so rough in ie6. The color was a little dull compared to png 24
    and even gif. I'm looking into the alpha transparency now.
     
    toxee, Nov 19, 2009
    #11
  12. toxee

    toxee Guest

    On Nov 18, 9:13 pm, toxee <> wrote:
    > On Nov 18, 8:47 pm, "Nik Coughlin" <> wrote:
    >
    >
    >
    > > > "toxee" <> wrote in message
    > > >news:....
    > > > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > > > "toxee" <> wrote in message
    > > > >news:...
    > > > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > > > Because the PNG transparency looks bad with IE right? Super simple fix:

    >
    > > > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > > > > So many suggestions in this thread already, thanks guys! Yes, it's to
    > > > > > avoid that hideous background for my transparent image of the client.
    > > > > > I see three different methods on that page, I'm not sure how I
    > > > > > implement any of the techniques though. Like where in my code would
    > > > > > they go. If I used the second method the class is,

    >
    > > > > Use the first method, the pngquant one. You have to download the program
    > > > > and
    > > > > run it from the command line, but it's pretty easy. You end up with an
    > > > > indexed alpha png, which compliant browsers will display much like your
    > > > > current png files, and which IE 6 and below will display with binary
    > > > > transparency, ie like a GIF does, so it's win-win and you don't have to
    > > > > change your code. You just have to run your png's thru that program is
    > > > > all.
    > > > > Almost all PNGs will still look OK afterwards, if not use one of the
    > > > > other
    > > > > methods.

    >
    > > > I see what you mean, I didn't know that exe was a converter. Photoshop
    > > > can save images in png8, I tried it and it looked just as jaggy as the
    > > > gif format. So is that what the program does, just convert it the same
    > > > way photoshop would?

    >
    > > No, the only similarity is that it converts the png to an indexed image, but
    > > when using pngquant the palette can also include colours with alpha
    > > transparency (varying degrees of opacity), so you still get the ability to
    > > antialias edges of the image against any background as you do with a 24 or
    > > 32 bit PNG.

    >
    > > Modern browsers display these correctly, without jaggies, and IE 6 throws
    > > away the pixels that are alpha transparent, which makes the image look jaggy
    > > like a gif

    >
    > Ah I see, I it does work a bit better as there is no nasty outlines,
    > but the quality is pretty rough. The image ended up having holes in it
    > it was so rough in ie6. The color was a little dull compared to png 24
    > and even gif. I'm looking into the alpha transparency now.


    Ahh, I figured it out...sort of....

    <div class="pearl">
    <!--[if gte IE 7]>
    <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    <![endif]-->
    <!--[if lte IE 6]>
    <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    <![endif]-->
    </div>

    .....works great except now I don't have a picture in FF. :p
    Is there anyway I can get the swap without other browsers ignoring the
    image code since it's inside an IE statement? I can't do it in css
    because background images can't scale and stretch and I want this one
    to.
     
    toxee, Nov 19, 2009
    #12
  13. toxee

    toxee Guest

    On Nov 18, 10:51 pm, toxee <> wrote:
    > On Nov 18, 9:13 pm, toxee <> wrote:
    >
    >
    >
    > > On Nov 18, 8:47 pm, "Nik Coughlin" <> wrote:

    >
    > > > > "toxee" <> wrote in message
    > > > >news:...
    > > > > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > > > > "toxee" <> wrote in message
    > > > > >news:...
    > > > > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > > > > Because the PNG transparency looks bad with IE right? Super simple fix:

    >
    > > > > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > > > > > So many suggestions in this thread already, thanks guys! Yes, it's to
    > > > > > > avoid that hideous background for my transparent image of the client.
    > > > > > > I see three different methods on that page, I'm not sure how I
    > > > > > > implement any of the techniques though. Like where in my code would
    > > > > > > they go. If I used the second method the class is,

    >
    > > > > > Use the first method, the pngquant one. You have to download the program
    > > > > > and
    > > > > > run it from the command line, but it's pretty easy. You end up with an
    > > > > > indexed alpha png, which compliant browsers will display much like your
    > > > > > current png files, and which IE 6 and below will display with binary
    > > > > > transparency, ie like a GIF does, so it's win-win and you don't have to
    > > > > > change your code. You just have to run your png's thru that program is
    > > > > > all.
    > > > > > Almost all PNGs will still look OK afterwards, if not use one of the
    > > > > > other
    > > > > > methods.

    >
    > > > > I see what you mean, I didn't know that exe was a converter. Photoshop
    > > > > can save images in png8, I tried it and it looked just as jaggy as the
    > > > > gif format. So is that what the program does, just convert it the same
    > > > > way photoshop would?

    >
    > > > No, the only similarity is that it converts the png to an indexed image, but
    > > > when using pngquant the palette can also include colours with alpha
    > > > transparency (varying degrees of opacity), so you still get the ability to
    > > > antialias edges of the image against any background as you do with a 24 or
    > > > 32 bit PNG.

    >
    > > > Modern browsers display these correctly, without jaggies, and IE 6 throws
    > > > away the pixels that are alpha transparent, which makes the image look jaggy
    > > > like a gif

    >
    > > Ah I see, I it does work a bit better as there is no nasty outlines,
    > > but the quality is pretty rough. The image ended up having holes in it
    > > it was so rough in ie6. The color was a little dull compared to png 24
    > > and even gif. I'm looking into the alpha transparency now.

    >
    > Ahh, I figured it out...sort of....
    >
    > <div class="pearl">
    > <!--[if gte IE 7]>
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->
    > <!--[if lte IE 6]>
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->
    > </div>
    >
    > ....works great except now I don't have a picture in FF. :p
    > Is there anyway I can get the swap without other browsers ignoring the
    > image code since it's inside an IE statement? I can't do it in css
    > because background images can't scale and stretch and I want this one
    > to.


    Okay, I think I've finally got it.
    <div class="pearl">
    <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    <!--[if lte IE 6]>
    <STYLE type="text/css">
    img.pearl {display: none;}
    </STYLE>
    <img class="pearl2" src="pearl.gif" alt="Pearl Davis Ministries"
    title="Pearl Davis Ministries">
    <![endif]-->
    </div>

    Gave the gif it's own class 'pearl2' and made the if statement not
    display the original 'pearl' class so I don't end up with two images
    in ie6. Thanks again for all the help as always!
     
    toxee, Nov 19, 2009
    #13
  14. toxee

    BootNic Guest

    On Wed, 18 Nov 2009 22:51:47 -0800 (PST)
    toxee <> wrote:

    [snip]

    > Ahh, I figured it out...sort of....
    >
    > <div class="pearl">
    > <!--[if gte IE 7]>
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->


    <!--[if gte IE 7]> <!-->
    Content for IE 7 or greater and non IE browsers
    <!--> <![endif]-->

    > <!--[if lte IE 6]>
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->
    > </div>
    >
    > ....works great except now I don't have a picture in FF. :p
    > Is there anyway I can get the swap without other browsers ignoring the
    > image code since it's inside an IE statement? I can't do it in css
    > because background images can't scale and stretch and I want this one
    > to.


    To use a conditional comment to restrict IE versions and display to non
    ie browsers you need to use the other form of the conditional comment.

    An HTML comment:
    <!-- html comment not usually displayed -->

    An Conditional comment to display its content only to IE or IE version
    depending on the instruction:
    <!--[if IE]>
    Content only IE should display, non IE browser should see this as
    an HTML comment
    <![endif]-->

    Content for non IE browsers:
    <!--[if !IE]> <!-->
    IE should ignore this content non IE browsers should see this as HTML
    comment | content to display | HTML comment
    <!--> <![endif]-->

    The above conditional comment need not limit all IE versions from
    showing the content. An example provided in-line above.




    --
    BootNic Thu Nov 19, 2009 02:59 am
    Genius is eternal patience.
    *Michelangelo*

    â• 235 days remaining

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v2.0.12 (GNU/Linux)

    iEYEARECAAYFAksE+s8ACgkQmo2774GZ7ql9aACfYjNmfvsiP9nABwCZobeXhAxf
    VvMAnjGodJRXg+W0qNa+0dV8Do8oiApX
    =7LHr
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 19, 2009
    #14
  15. toxee

    +mrcakey Guest

    "dorayme" <> wrote in message
    news:...
    > In article
    > <>,
    > toxee <> wrote:
    >
    >> <div class="pearl">
    >> <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    >> title="Pearl Davis Ministries">
    >> </div>
    >>
    >> <div class="pearl">
    >> <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    >> title="Pearl Davis Ministries">
    >> </div>
    >>
    >> Basically if the user is using something as old or older than IE6 I
    >> wanted it to use gif format instead of png format. How do I do this
    >> exactly?

    >
    > The simplest thing, if you are really concerned, is to use gif all the
    > time rather than png. Show me an example of your images where you are
    > seeing such a great advantage of png over gif that you would be prepared
    > to go to the trouble of making two images, loading them and having them
    > on the server and making them available via conditional comments or
    > whatever to different browsers...


    I presume he's got some transparency in there, in which case - as you know -
    there's a big difference between PNG and GIF.

    --
    +mrcakey
    www.twitter.com/mrcakey
     
    +mrcakey, Nov 19, 2009
    #15
  16. toxee

    +mrcakey Guest

    "Jonathan N. Little" <> wrote in message
    news:he27ms$igc$-september.org...
    > toxee wrote:
    >> <div class="pearl">
    >> <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    >> title="Pearl Davis Ministries">
    >> </div>
    >>
    >> <div class="pearl">
    >> <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    >> title="Pearl Davis Ministries">
    >> </div>
    >>
    >> Basically if the user is using something as old or older than IE6 I
    >> wanted it to use gif format instead of png format. How do I do this
    >> exactly?

    >
    > <object type="image/png" data="pearl.png"><img src="pearl.gif"></object>
    >


    Bloody hell! That does it!

    I've been searching all over the place for a simpler solution to this
    problem.

    I wave many kudos points in your direction.

    --
    +mrcakey
    www.twitter.com/mrcakey
     
    +mrcakey, Nov 19, 2009
    #16
  17. toxee

    +mrcakey Guest

    "toxee" <> wrote in message
    news:...
    On Nov 18, 10:51 pm, toxee <> wrote:
    > On Nov 18, 9:13 pm, toxee <> wrote:
    >
    >
    >
    > > On Nov 18, 8:47 pm, "Nik Coughlin" <> wrote:

    >
    > > > > "toxee" <> wrote in message
    > > > >news:...
    > > > > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > > > > "toxee" <> wrote in message
    > > > > >news:...
    > > > > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > > > > Because the PNG transparency looks bad with IE right? Super simple
    > > > > > fix:

    >
    > > > > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > > > > > So many suggestions in this thread already, thanks guys! Yes,
    > > > > > > it's to
    > > > > > > avoid that hideous background for my transparent image of the
    > > > > > > client.
    > > > > > > I see three different methods on that page, I'm not sure how I
    > > > > > > implement any of the techniques though. Like where in my code
    > > > > > > would
    > > > > > > they go. If I used the second method the class is,

    >
    > > > > > Use the first method, the pngquant one. You have to download the
    > > > > > program
    > > > > > and
    > > > > > run it from the command line, but it's pretty easy. You end up
    > > > > > with an
    > > > > > indexed alpha png, which compliant browsers will display much like
    > > > > > your
    > > > > > current png files, and which IE 6 and below will display with
    > > > > > binary
    > > > > > transparency, ie like a GIF does, so it's win-win and you don't
    > > > > > have to
    > > > > > change your code. You just have to run your png's thru that
    > > > > > program is
    > > > > > all.
    > > > > > Almost all PNGs will still look OK afterwards, if not use one of
    > > > > > the
    > > > > > other
    > > > > > methods.

    >
    > > > > I see what you mean, I didn't know that exe was a converter.
    > > > > Photoshop
    > > > > can save images in png8, I tried it and it looked just as jaggy as
    > > > > the
    > > > > gif format. So is that what the program does, just convert it the
    > > > > same
    > > > > way photoshop would?

    >
    > > > No, the only similarity is that it converts the png to an indexed
    > > > image, but
    > > > when using pngquant the palette can also include colours with alpha
    > > > transparency (varying degrees of opacity), so you still get the
    > > > ability to
    > > > antialias edges of the image against any background as you do with a
    > > > 24 or
    > > > 32 bit PNG.

    >
    > > > Modern browsers display these correctly, without jaggies, and IE 6
    > > > throws
    > > > away the pixels that are alpha transparent, which makes the image look
    > > > jaggy
    > > > like a gif

    >
    > > Ah I see, I it does work a bit better as there is no nasty outlines,
    > > but the quality is pretty rough. The image ended up having holes in it
    > > it was so rough in ie6. The color was a little dull compared to png 24
    > > and even gif. I'm looking into the alpha transparency now.

    >
    > Ahh, I figured it out...sort of....
    >
    > <div class="pearl">
    > <!--[if gte IE 7]>
    > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->
    > <!--[if lte IE 6]>
    > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > title="Pearl Davis Ministries">
    > <![endif]-->
    > </div>
    >
    > ....works great except now I don't have a picture in FF. :p
    > Is there anyway I can get the swap without other browsers ignoring the
    > image code since it's inside an IE statement? I can't do it in css
    > because background images can't scale and stretch and I want this one
    > to.


    -Okay, I think I've finally got it.
    -<div class="pearl">
    -<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    -title="Pearl Davis Ministries">
    -<!--[if lte IE 6]>
    -<STYLE type="text/css">
    -img.pearl {display: none;}
    - </STYLE>
    -<img class="pearl2" src="pearl.gif" alt="Pearl Davis Ministries"
    -title="Pearl Davis Ministries">
    -<![endif]-->
    -</div>
    -
    -Gave the gif it's own class 'pearl2' and made the if statement not
    -display the original 'pearl' class so I don't end up with two images
    -in ie6. Thanks again for all the help as always!

    That's quite clever. The solution provided by Jonathan N Little is very
    elegant if you want to look at that.

    I know that there are a lot of "PNG fix" Javascript solutions out there.
    I've never had any luck with any of them, but http://www.mcfc.co.uk uses
    transparent PNG files all over the place and still looks good in IE6 so they
    must be doing something right if you have time to investigate.

    Personally I'm planning to start giving clients a discount if they allow me
    the luxury of not supporting IE6. Last project I did I thought I'd finished
    then spent another 3 hours fixing some of the pages for IE6. That's a lot of
    time on a small project.

    --
    +mrcakey
    www.twitter.com/mrcakey
     
    +mrcakey, Nov 19, 2009
    #17
  18. +mrcakey wrote:
    > "Jonathan N. Little"<> wrote in message


    >> <object type="image/png" data="pearl.png"><img src="pearl.gif"></object>
    >>

    >
    > Bloody hell! That does it!
    >
    > I've been searching all over the place for a simpler solution to this
    > problem.
    >


    There is one thing to note: where now IE7 does finally support alpha
    transparency but doesn't the object, so only IE8 users will see the
    spiffy PNG. But hey they are IE users--get what you deserve! ;-)


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 19, 2009
    #18
  19. toxee

    toxee Guest

    On Nov 19, 12:01 pm, dorayme <> wrote:
    > In article <he3s3c$>,
    >
    >
    >
    >  "+mrcakey" <> wrote:
    > > "dorayme" <> wrote in message
    > >news:...
    > > > In article
    > > > <>,
    > > > toxee <> wrote:

    >
    > > >> <div class="pearl">
    > > >> <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > > >> title="Pearl Davis Ministries">
    > > >> </div>

    >
    > > >> <div class="pearl">
    > > >> <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > > >> title="Pearl Davis Ministries">
    > > >> </div>

    >
    > > >> Basically if the user is using something as old or older than IE6 I
    > > >> wanted it to use gif format instead of png format. How do I do this
    > > >> exactly?

    >
    > > > The simplest thing, if you are really concerned, is to use gif all the
    > > > time rather than png. Show me an example of your images where you are
    > > > seeing such a great advantage of png over gif that you would be prepared
    > > > to go to the trouble of making two images, loading them and having them
    > > > on the server and making them available via conditional comments or
    > > > whatever to different browsers...

    >
    > > I presume he's got some transparency in there, in which case - as you know -
    > > there's a big difference between PNG and GIF.

    >
    > Sometimes there is not such a big difference but I should have withheld
    > my fingers! Perhaps the way I prepare gifs in Fireworks (it is not so
    > good in Photoshop) has made me too confident and perhaps it is the sort
    > of gifs I have often used and the careful choices of backgrounds where
    > the transparent gifs are placed. But I watch this thread with interest.
    > I will experiment with some facilities Nick provided when I have time.
    >
    > --
    > dorayme


    Ah so Fireworks prepared gifs a little better than PS?
     
    toxee, Nov 19, 2009
    #19
  20. toxee

    toxee Guest

    On Nov 19, 8:48 am, "+mrcakey" <> wrote:
    > "toxee" <> wrote in message
    >
    > news:...
    > On Nov 18, 10:51 pm, toxee <> wrote:
    >
    >
    >
    > > On Nov 18, 9:13 pm, toxee <> wrote:

    >
    > > > On Nov 18, 8:47 pm, "Nik Coughlin" <> wrote:

    >
    > > > > > "toxee" <> wrote in message
    > > > > >news:..com...
    > > > > > On Nov 18, 7:26 pm, "Nik Coughlin" <> wrote:
    > > > > > > "toxee" <> wrote in message
    > > > > > >news:...
    > > > > > > On Nov 18, 4:14 pm, "Nik Coughlin" <> wrote:
    > > > > > > Because the PNG transparency looks bad with IE right? Super simple
    > > > > > > fix:

    >
    > > > > > > >http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

    >
    > > > > > > > So many suggestions in this thread already, thanks guys! Yes,
    > > > > > > > it's to
    > > > > > > > avoid that hideous background for my transparent image of the
    > > > > > > > client.
    > > > > > > > I see three different methods on that page, I'm not sure how I
    > > > > > > > implement any of the techniques though. Like where in my code
    > > > > > > > would
    > > > > > > > they go. If I used the second method the class is,

    >
    > > > > > > Use the first method, the pngquant one. You have to download the
    > > > > > > program
    > > > > > > and
    > > > > > > run it from the command line, but it's pretty easy. You end up
    > > > > > > with an
    > > > > > > indexed alpha png, which compliant browsers will display much like
    > > > > > > your
    > > > > > > current png files, and which IE 6 and below will display with
    > > > > > > binary
    > > > > > > transparency, ie like a GIF does, so it's win-win and you don't
    > > > > > > have to
    > > > > > > change your code. You just have to run your png's thru that
    > > > > > > program is
    > > > > > > all.
    > > > > > > Almost all PNGs will still look OK afterwards, if not use one of
    > > > > > > the
    > > > > > > other
    > > > > > > methods.

    >
    > > > > > I see what you mean, I didn't know that exe was a converter.
    > > > > > Photoshop
    > > > > > can save images in png8, I tried it and it looked just as jaggy as
    > > > > > the
    > > > > > gif format. So is that what the program does, just convert it the
    > > > > > same
    > > > > > way photoshop would?

    >
    > > > > No, the only similarity is that it converts the png to an indexed
    > > > > image, but
    > > > > when using pngquant the palette can also include colours with alpha
    > > > > transparency (varying degrees of opacity), so you still get the
    > > > > ability to
    > > > > antialias edges of the image against any background as you do with a
    > > > > 24 or
    > > > > 32 bit PNG.

    >
    > > > > Modern browsers display these correctly, without jaggies, and IE 6
    > > > > throws
    > > > > away the pixels that are alpha transparent, which makes the image look
    > > > > jaggy
    > > > > like a gif

    >
    > > > Ah I see, I it does work a bit better as there is no nasty outlines,
    > > > but the quality is pretty rough. The image ended up having holes in it
    > > > it was so rough in ie6. The color was a little dull compared to png 24
    > > > and even gif. I'm looking into the alpha transparency now.

    >
    > > Ahh, I figured it out...sort of....

    >
    > > <div class="pearl">
    > > <!--[if gte IE 7]>
    > > <img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > > title="Pearl Davis Ministries">
    > > <![endif]-->
    > > <!--[if lte IE 6]>
    > > <img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
    > > title="Pearl Davis Ministries">
    > > <![endif]-->
    > > </div>

    >
    > > ....works great except now I don't have a picture in FF. :p
    > > Is there anyway I can get the swap without other browsers ignoring the
    > > image code since it's inside an IE statement? I can't do it in css
    > > because background images can't scale and stretch and I want this one
    > > to.

    >
    > -Okay, I think I've finally got it.
    > -<div class="pearl">
    > -<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
    > -title="Pearl Davis Ministries">
    > -<!--[if lte IE 6]>
    > -<STYLE type="text/css">
    > -img.pearl {display: none;}
    > - </STYLE>
    > -<img class="pearl2" src="pearl.gif" alt="Pearl Davis Ministries"
    > -title="Pearl Davis Ministries">
    > -<![endif]-->
    > -</div>
    > -
    > -Gave the gif it's own class 'pearl2' and made the if statement not
    > -display the original 'pearl' class so I don't end up with two images
    > -in ie6. Thanks again for all the help as always!
    >
    > That's quite clever. The solution provided by Jonathan N Little is very
    > elegant if you want to look at that.
    >
    > I know that there are a lot of "PNG fix" Javascript solutions out there.
    > I've never had any luck with any of them, buthttp://www.mcfc.co.ukuses
    > transparent PNG files all over the place and still looks good in IE6 so they
    > must be doing something right if you have time to investigate.
    >
    > Personally I'm planning to start giving clients a discount if they allow me
    > the luxury of not supporting IE6. Last project I did I thought I'd finished
    > then spent another 3 hours fixing some of the pages for IE6. That's a lot of
    > time on a small project.
    >
    > --
    > +mrcakeywww.twitter.com/mrcakey


    I tried the object method and didn't get an image. How does it work?
    You're totally right about IE6, I support it because I know so many
    people still use it since it comes with XP by default and the average
    person(especially my clients) can barely use a pc, let alone upgrade
    the browser.
     
    toxee, Nov 19, 2009
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Phillip Roncoroni
    Replies:
    6
    Views:
    6,238
  2. Alec S.
    Replies:
    10
    Views:
    10,314
    Alec S.
    Apr 16, 2005
  3. Niels Dekker (no reply address)

    What swap is called when using std::swap?

    Niels Dekker (no reply address), Jul 19, 2006, in forum: C++
    Replies:
    4
    Views:
    1,009
    Niels Dekker (no reply address)
    Jul 20, 2006
  4. The Plankmeister

    Swap images and retain height? IE6=good... Opera6=bad

    The Plankmeister, Sep 2, 2003, in forum: Javascript
    Replies:
    0
    Views:
    87
    The Plankmeister
    Sep 2, 2003
  5. Clay
    Replies:
    1
    Views:
    164
    Elegie
    Sep 28, 2006
Loading...

Share This Page