1

I know this issue deals with IE browsers failing to display PNG files, especially if you are a power user on Windows Vista and you are using IE7. My hope to find a solution to replace a PNG file with gif only if the png is not supported. Is there a way from a javascript or css perspective to achieve such an effect? I'm trying to accomplish this for background images on div tags.

Thanks!

klewis
  • 7,459
  • 15
  • 58
  • 102

2 Answers2

1

You could use IE's conditional css to override background images

<style type="text/css">
   div.something { background: url(someimage.png); }
</style>

<!--[if lte IE 7]>
<style type="text/css">
   div.something { background: url(override.gif); }
</style>
<!-- <![endif]-->
Marc B
  • 356,200
  • 43
  • 426
  • 500
  • I don't think you need the ` – David Thomas Nov 03 '11 at 17:35
  • Excellent work, and David is right about the tag. This technique now leaves the hard work now up to the designer, to design the gif image in a way to match the png's transparency effect. Thanks again! – klewis Nov 03 '11 at 20:16
0

There are some ideas over at this question:

Is it possible to check for PNG support with jQuery.Support?

you'll likely have to use some css hacks. to target IE 7.

this page has some tricks to do it: http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

Community
  • 1
  • 1
Patricia
  • 7,752
  • 4
  • 37
  • 70