CSS, PNG, and IE

[johnnyblotter]

Hi,

After getting near the end of working on www.jontakiff.com/portfolio2, I realize I have a very serious png issue to contend with. My understanding is that there is no way to get pngs that have been positioned(as these are) to work on IE6. Is anyone aware of any fix for this? ALSO - Can someone tell me if the site's links behave in IE7?

Thanks!

[blue-eye-labs]

the main issue with IE is that it doesn't display png transparencies/translucencies properly... at all for that matter.
There are ways around this, the best of which being the use of an alternate ie-6-or-lower stylesheet, which you implement using IE conditional comments and in which you replace all the background images with .gifs (reduced quality but the advantage of IE compatibility.
For images that are in <img> tags, there is a nice script which I believe works which uses javascript to apply a special ms filter, you can find this here: http://homepage.ntlworld.com/bobosola/index.htm

I hope that that solves your problem, I've just been working on similar issues.

[johnnyblotter]

yeah, I used gifs for ie6, but can someone take a quick peek in IE7? There may be a problem with the links...

thanks so much folks...

[toicontien]

Maybe this will help: Internet Explorer and Transparent PNGs (http://www.webdeveloper.com/forum/showthread.php?t=125373#post655131)

[Centauri]

Any background png that uses the Direct-X AlphaImageLoader filter cannot be positioned or repeated, and there is no way around that. The filter also causes problems when the images are backgrounds for links. This is the major reason png graphics haven't got the universal use they could have.

Your images would be best served as gifs anyway, as there does not need to be an alpha transparency, only a single colour pellette transparancy which gifs are good at - the file size will be smaller as well.

[johnnyblotter]

Gifs actually do not work so well, because the edges of the gif are bordered on two different colors, the background color and the interior color of the navs. Therefore I get a "spiky" kind of edge no matter what matte I use. You can see this if you look at www.jontakiff.com/portfolio2 on IE6.

Can anyone take a quick check on IE7?


:)

I'm a pain. I know.

[johnnyblotter]

Here's a pic to show you what I'm talkin' about...gifs in IE6, with the matte showing though...

[Centauri]

I though we reworked those graphics so each one includes the overlap of the others, thereby eliminating that problem .......

Looking at IE6, I still see the png images as the ie.css file doesn't exist ....


Edit: looking at the png graphic, it dawned - as the unhovered section of the circles is blue, each grahic should also have the blue parts on adjacent circle parts, and not be transparent here. Done like this, the gifs should be no problem.

[johnnyblotter]

Each graphic does overlap the others. The problem is, each graphic is going to be bordering two different colors. When one circle is red, it will be bordering both the page's background as well as the blue color from an adjacent circle. I can't see any way around this. Either I set the matte to the background color or to the adjacent circle color: I can't have both, which means the matte will be spiky and visible. Maybe I'm not understanding you, but I can't see any way to solve the spiky matte problem....

It worked when my circles were transparent in the non-hover state because we were only dealing with one color...

I put the ie.css file up, I forgot to do that last time.

[Centauri]

What I mean is that each graphic will show the blue in the adjoining circles, with the white being the transparent colour, such as the sample attached.

[johnnyblotter]

Man, thanks for the help on this. This actually doesn't work...only because as part of the design, I always have one circle being red...letting you know what page you are on. So when you hover on the blue circles, the blue goes over the red.

[Centauri]

Yes, I had spotted that some time after my last post. It could be possible to do three sets of graphics, with a different set used depending on what page you are on (lnked to a page body id). This does mean you need 9 graphics instead of 3.