[sniffer]

Hi, in my spear time I sometimes spend some time working on my homepage. I am no pro designer or anything. Just plain html stuff.
But there is something I can't figure out. My transparent *.png files doesn't show up correctly on IE for Windows. The transparent areas gets grey instead of transparent. *.gif files as an alternative doesn't always look so very nice IMHO.
Does anyone have any tips or suggestion regarding this and how to make a site as browser compatible as possible on a mac?
I am using Dreamveaver MX and Photoshop 7 in os ten.
Thanks in advance.

[codywalton]

Dont use .png's.... at least not for standard HTML design. they are just not compatable enough to make it worthwhile.

Most of the time you can get a .gif to work well enough if you just keep playing with the settings. ( try dithering the edges of the transparency.)

If .gif's cant get the effect you want, you may want to search for an alternative idea.



.PNG's work great for Flash design though

[Adam Betts]

Originally posted by codywalton:
Dont use .png's.... at least not for standard HTML design. they are just not compatable enough to make it worthwhile.

I disagree.

[Phoenix1701]

I disagree as well. "Not compatible enough" essentially boils down here to "IE for Windows" doesn't support them correctly". That may be true if you define "standard HTML design" to be "designing sites primarily for Windows users", but every other major browser does render the backgrounds correctly (Netscape/Mozilla/Chimera/Phoenix for both Windows and Mac, Safari, OmniWeb, I think even Opera gets them now), and they do display under IE for Windows, just not with the correct background transparency. You should use GIFs if you can, but if you're doing something that needs to look translucent and either (a) moves, or (b) might not be at exactly the same location on the page relative to the upper-left corner because of browser differences and the background is too complex to fudge it, or (c) has to somehow interact with other graphics and composite using layers, you basically need PNG.

[sniffer]

Thanks for quick replays guys.
I think for my current issue it might work nicely with gifs, if I get it right.

Most of the time you can get a .gif to work well enough if you just keep playing with the settings. ( try dithering the edges of the transparency.)

I am not really sure what that means, I've just started experimenting with my tools Photoshop and Dreamw. But that sounds like a solution on my problem. Sorry for being a little hopeless.
Would it even be possible to let say making characters with drop shadows that way? I know such thing is easily made with png format, but I haven't been lucky so far with gifs.

You should use GIFs if you can, but if you're doing something that needs to look translucent and either (a) moves, or (b) might not be at exactly the same location on the page relative to the upper-left corner because of browser differences and the background is too complex to fudge it, or (c) has to somehow interact with other graphics and composite using layers, you basically need PNG.

If you have to use png is there a way to make transparent pngs show correctly in MS IE for windows?

Sorry again for being a bit amateur here.

Netscape/Mozilla/Chimera/Phoenix for both Windows and Mac, Safari, OmniWeb, I think even Opera gets them now

Just a side-note. I tested and found transparent pngs to work just fine with Opera for windows. It's sad that IE for win doesn't display png correctly yet. Can I use VPC for browser testing purposes? (I know my ibook might choke a little with that running including Dreamw, PS, imageready as well but..)

[Mac Guru]

I disagree on PNG's as well... If you gather some data on what people use to view your site you use what looks best for the majority IMO. On my site my stats said over 80% of the visitors to my site used web browsers that rendered PNG's properly so I used PNG's. If you're using a non standards compliant browser for such graphic type's that's your problem. I didn't make the site for you.



Mac Guru

[sniffer]

Man, IE for both X and XP is starting giving me a headache now. What's with that?
The netscape variants and Safari seems to take everything quite easily OTOH. Frustrating!
Perhaps I should look for a "I boycott my IE support web-ring!"

[Phoenix1701]

GIFs only support eight-bit color and one-bit transparency. That is to say, you can only use up to 256 separate colors, and either a pixel is transparent, or it's not; there's nothing in between.

PNGs, on the other hand, support 24-bit color and 256 levels of transparency, ranging from totally transparent to totally opaque. (If you're curious, that's 16,777,216 colors, defined here as "more than enough".) The benefits of GIFs are that they're more compatible and generally result in smaller files. The benefits of PNGs are just about everything else.

IE for Windows won't render PNG backgrounds correctly; it will just mask it to a sort of steel gray color instead, for some reason I don't claim to understand. IE for Mac OS X doesn't have this problem, but the transparency of PNGs used for the backgrounds of tables (and possibly of pages themselves) isn't respected; anything under 128 becomes wholly transparent, and anything else becomes wholly opaque. It took me years to run across that problem, so don't worry too much about it.

The only problem I tend to have with IE for OS X is that it happily renders all sorts of seriously broken code that makes every other browser run screaming, so using IE to debug things is generally a bad idea. Once you get it working in another browser, though, you can be pretty sure it'll render in IE too. Guess it depends on what you're doing, though.

Oh, yeah, and I think there are tons and tons of "I boycott IE" webrings out there. lol. That might say something.

[codywalton]

yeah, well try telling your client that it's ok their page doesnt render corectly with Win IE, because PNG's look cooler on everything else but Win IE. They dont care....if 90% of the people who will view the page use Win IE, you HAVE to make it compatable with Win IE, even If you design it on OS X, and test it with Safari.

If you don't care about that 90%, then go ahead and use a PNG, and that's perfectly ok. But as a professional web designer, my experiences have been its better to be more comptatable, rather than cooler looking.

[Millennium]

Originally posted by codywalton:
Dont use .png's.... at least not for standard HTML design. they are just not compatable enough to make it worthwhile.

Untrue.

It is true that the Win/IE folks have dragged their feet in making PNG transparency work right by default (note that PNG's which don't use transparency work fine). PNG transparency can be made to work properly in IE, though it's a rather painful process. This article will tell you more about that process, by the way.

What I would suggest is not bothering with transparency, if it can be helped. Seriously; particularly if you're using flat-color backgrounds, you can easily have the background in a separate layer in Photoshop, making generating new backgrounds a trivial task. Or, you could use the technique Zeldman describes in the article I linked. I've considered trying my hand at writing a drop-in script which achieves a similar effect, but replaces plain IMG tags with Zeldman's DIV's, so that it could be added to any current HTML in one step.