Conditional image swap for IE6?

toxee

unread,

Nov 18, 2009, 5:39:32 PM11/18/09

to

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?

dorayme

unread,

Nov 18, 2009, 6:05:57 PM11/18/09

to

In article
<27eb79ac-cb0b-4d55...@d9g2000prh.googlegroups.com>,
toxee <mido...@yahoo.com> wrote:

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

Nik Coughlin

unread,

Nov 18, 2009, 7:14:37 PM11/18/09

to

"toxee" <mido...@yahoo.com> wrote in message
news:27eb79ac-cb0b-4d55...@d9g2000prh.googlegroups.com...

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/

Jonathan N. Little

unread,

Nov 18, 2009, 8:40:37 PM11/18/09

to

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

BootNic

unread,

Nov 18, 2009, 8:50:41 PM11/18/09

to

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

signature.asc

toxee

unread,

Nov 18, 2009, 9:16:20 PM11/18/09

to

On Nov 18, 4:14 pm, "Nik Coughlin" <nrkn....@gmail.com> wrote:
> "toxee" <midor...@yahoo.com> wrote in message

> 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?

Adrienne Boswell

unread,

Nov 18, 2009, 9:41:52 PM11/18/09

to

Gazing into my crystal ball I observed toxee <mido...@yahoo.com>
writing in news:27eb79ac-cb0b-4d55-a531-be634515d845
@d9g2000prh.googlegroups.com:

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" />

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Nik Coughlin

unread,

Nov 18, 2009, 10:26:19 PM11/18/09

to

"toxee" <mido...@yahoo.com> wrote in message

news:473da0e4-f4ad-4cc3...@x6g2000prc.googlegroups.com...

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.

toxee

unread,

Nov 18, 2009, 11:36:17 PM11/18/09

to

On Nov 18, 7:26 pm, "Nik Coughlin" <nrkn....@gmail.com> wrote:
> "toxee" <midor...@yahoo.com> wrote in message

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?

Nik Coughlin

unread,

Nov 18, 2009, 11:47:11 PM11/18/09

to

> "toxee" <mido...@yahoo.com> wrote in message

> news:38ec5c9f-f357-415c...@v15g2000prn.googlegroups.com...

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

toxee

unread,

Nov 19, 2009, 12:13:51 AM11/19/09

to

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

unread,

Nov 19, 2009, 1:51:47 AM11/19/09

to

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

<![endif]-->
<!--[if lte IE 6]>

<![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

unread,

Nov 19, 2009, 2:07:18 AM11/19/09

to

Okay, I think I've finally got it.
<div class="pearl">

<!--[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!

BootNic

unread,

Nov 19, 2009, 2:59:07 AM11/19/09

to

On Wed, 18 Nov 2009 22:51:47 -0800 (PST)
toxee <mido...@yahoo.com> wrote:

[snip]

> Ahh, I figured it out...sort of....
>
> <div class="pearl">
>

Content for IE 7 or greater and non IE browsers

> 
> </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:

An Conditional comment to display its content only to IE or IE version
depending on the instruction:

Content for non IE browsers:

IE should ignore this content non IE browsers should see this as HTML
comment | content to display | HTML comment

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

signature.asc

+mrcakey

unread,

Nov 19, 2009, 11:34:56 AM11/19/09

to

"dorayme" <dorayme...@optusnet.com.au> wrote in message
news:doraymeRidThis-8DE...@news.albasani.net...

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

unread,

Nov 19, 2009, 11:42:22 AM11/19/09

to

"Jonathan N. Little" <lws...@gmail.com> wrote in message
news:he27ms$igc$1...@news.eternal-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

unread,

Nov 19, 2009, 11:48:26 AM11/19/09

to

"toxee" <mido...@yahoo.com> wrote in message

news:d64c99d1-5bbe-4b99...@x25g2000prf.googlegroups.com...

-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">
-
-</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

Jonathan N. Little

unread,

Nov 19, 2009, 2:05:29 PM11/19/09

to

+mrcakey wrote:
> "Jonathan N. Little"<lws...@gmail.com> 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! ;-)

dorayme

unread,

Nov 19, 2009, 3:01:32 PM11/19/09

to

In article <he3s3c$1tp$1...@news.albasani.net>,
"+mrcakey" <webm...@listyblue.com> wrote:

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

toxee

unread,

Nov 19, 2009, 4:33:37 PM11/19/09

to

On Nov 19, 12:01 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article <he3s3c$1t...@news.albasani.net>,
>
>
>
> "+mrcakey" <webmas...@listyblue.com> wrote:
> > "dorayme" <doraymeRidT...@optusnet.com.au> wrote in message
> >news:doraymeRidThis-8DE...@news.albasani.net...
> > > In article
> > > <27eb79ac-cb0b-4d55-a531-be634515d...@d9g2000prh.googlegroups.com>,

Ah so Fireworks prepared gifs a little better than PS?

toxee

unread,

Nov 19, 2009, 4:53:26 PM11/19/09

to

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.

dorayme

unread,

Nov 19, 2009, 6:09:26 PM11/19/09

to

In article
<940ea2c9-61b0-48f0...@j24g2000yqa.googlegroups.com>,
toxee <mido...@yahoo.com> wrote:

> > ...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?

For final exporting for web work I have always preferred FW. PS has
traditionally been software for photographs and for printing. It is
changing and becoming better for web work. But at least on my still mere
CS version, it is still a bit clunky where the web is concerned. They
tacked on Image Ready a few years back. I recall comparing it to FW as
soon as IR came out. The clunkiness of PS in regard to preparation for
web was unmistakable, and it was so much more intuitive to use jpg
compression on FW to produce smaller file sizes.

I fancy that all these programs will become closer together in their
capacities from now on, perhaps Adobe, that now own FW, might even drop
it? But they will have to do it in front of the whole world as some fans
appear on TV on a 50 storey ledge threatening to jump if they do. <g>

I should add that I use PS a great deal and very often for some
preliminary work on photographs (the filters and retouching tools and
keyboard commands on Macs are far superior to my FW). But for the simple
job of exporting and compressing etc, I use FW. It is also better on
text - still!

--
dorayme