Well, as you guys know that IE 6 and less can't view PNG's transparency. I've made a layout that really really really required to be saved as PNG files.

FYI: I'm a mac user. I used photoshop cs3 to design this layout. and of course, I'm a beginner that don't really know about colours, etc etc.

 

This is the example of the layout:

There is a wooden texture there. So I need to create the background from the wooden texture too. I made it repeat-y so that it will make smooth movements as I scroll the web downward. This will not look messy because I've made it as pattern.

 

Because the background is a random-wooden-texture, I need to make the header transparent like this:

 

but there's certainly a problem! IE's PNG disability!

 

I've tried to use css hacks like the "filter:DXblablabla and so on and so on..". But only IE can stand on it. No other browsers in this world understands that.

 

I decided to change the layout into this:

See the blank-coloured space on the bottom of the header? (to be exact, above the navigation)

At least I could fix the IE's PNG problem by saving images as JPG. PNGs are not needed now because I'm going to change the background into a background-color, not background: url(...) anymore

 

and here comes the other problem!

wow it works fine on mozilla firefox.

but hey.. huh? what?! why are the colours different?!

 

Oh no, I'm frustrated now. Can someone send me a help? While I'm going to post some introduction post since I'm still a new member

I think it's a colour profile that's embedded in the picture file. Some browsers use them and colour corrects the image, some don't. Usually you don't want that.

 

http://morris-photographics.com/photoshop/.../png-gamma.html

oh wait... dd you get that result with a JPEG?

Why don't you use GIF for transparent images? - it works across all browsers to my knowledge...

What notbanksy said, PNG's are new and will eventually take over but for now most people use GIF's for transparency?

 

If you're using photoshop then you have all the options, and should be able to get it to look perfect?

I see that there is no introduction topic here =\ or am I wrong?

 

Thomas: yes, a jpeg. this is always bothers me because the colour in I saw in firefox is like you've ddesigned something perfectly and someone accidentally threw his/her drink onto your work, and duh! it faded away!

 

notbansky: yeah, i've tried that one too. but still, pngs are better than gifs. the border of the image becomes jaggy

oh look at this poor little creature. jaggy!

or should I use some techniques to prevent this 'jag'?

yes but there're choices.

 

i might set the background so it will be darker and match the one in safari, or

i might set the background so it will be lighter and match the one in firefox.

 

and I still don't know if I test it on IE tomorrow at school (mac doesn't have IE things). Thanks for the help!! you guys are amazing

 

any other suggestions?

Change the Transparency Dither to diffusion or something else in the save for web and other devices panel.

 

And what do you mean by introduction topic? There is a forum for posting introductions if that's what you mean?

yes. sorry my english is bbbaaad

 

i'll try it after I finish my school (lol, I do online at school). thanks for the help

GIF should be fine if you change the matte to something like the darker shade on the wood pattern.

for PNG's Transparency in IE 6.0 or below try this one.... http://www.twinhelix.com/css/iepngfix/

 

there is a file for demo as well...try it...might be help

I fully appreciate your problem.

 

I have had both extremes when optimising and designing etc...

 

Ie. 6 is an absolute pain for most things CSS or rendering otherwise as it it not as good a browser as almost every other one! Unfortunately, although Ie. 6 and below should have been consiined as a bad idea made real long ago - there are many people out there still on dial-up or not very computer savvy why simply have never upgraded. Last time I checked 38% of all browser use was IE.6 - so, for the moment we have to patronise its 'quirky' and irratating inadequacies.

 

A regards images, I too have a site where I used a patterned PNG to keep quality and optimise in a website header. JPEG 80% just didnt cut it in terms of quality, and file sizes are actually higher because the PNG is vector only. Thus, I think the load time on 56k modem for the JPEG image was 6 seconds and 2 seconds in PNG 24!

 

What to do! Well.....

 

After much thought and trying various methods, I produced the header in PNG, but brought in the photograph within the banner as a progressive JPEG. I have the optimised banner - but sadly - it looks terrible in IE.6

 

Take a look: www.gardenfactors.co.uk

 

Renders fine in anything aside from IE. 6 and below.

 

The other extreme would be : www.kartingdays.co.uk/test2.php

 

Here I used a JPEG in the header for file size and it was far easier.

 

Gifs are supposed to be 'old hat' now compared to the PNG file. Browsers are all now fully compliant with PNG transparency and PNG file sizes are often quite a bit less than GIF. I also often find that GIF images haven't always got enough scope of gradients, fills and deep background effects to be much use these days...

 

Paul.