PDA

View Full Version : Getting a png to render properly in FF or IE



The Reverend
Aug 16th, 2007, 09:53 AM
Okay, I think this is the right forum for this, please move it if it's not. I'm coding a site for a friend who designed it and I have two .png corners I am trying to use.

The test site is here:

http://www.ninercaphell.com/samuel/

You can see the two corners do not render correctly. I have them simply coded in as is normal for an image. When I open up the png in PS, it is the exact same color as the background and I see no reason why it should not work. But when it renders in the browser, it becomes a lighter shade of gray for some reason.

I attached them if someone wants to take a look. In firefox the color is lighter, in IE the color is lighter and the empty space is completely white. I'd appreciate any help or advice.:thumbsup:

noPCtoday
Aug 16th, 2007, 10:42 AM
#4c4c4c is your corner's color, and #3b3b3b is your page background color. of course they are not the same.
and it works for me in IE7,
but in IE6, it will show white in transparent area, that is because IE6- don't support Transparent PNG, though there are some ways to get around it.
Here is the simplest way IMO:
http://geoland.org/2007/03/transparent-pngs-in-ie-without-javascript/

btw: your whole website is using AJAX? I don't recommand that, because googlebots don't understand AJAX and therefore your website content will be less likely to get searched.

The Reverend
Aug 16th, 2007, 10:58 AM
If you open the corner in PhotoShop, it is 3b3b3b.

And as far as the AJAX goes, the site also works without ajax, all those links are valid links if you turn off Javascript. It's how he wants it, not necessarily my own way of doing things.

Bill Posters
Aug 16th, 2007, 11:04 AM
And as far as the AJAX goes, the site also works without ajax, all those links are valid links if you turn off Javascript. It's how he wants it, not necessarily my own way of doing things.
Fwiw, that way (progressive enhancement/graceful degradation) is the best approach if you're going to be using AJAX.

ahallicks
Aug 16th, 2007, 12:23 PM
If you are simply using those images to create the rounded effect on a solid coloured background and solid coloured foreground, couldn't you just use a jpg or to save webspace a gif (dependant on the quality of course). I'm just wondering if the colour change is a result of the way in which you are saving the file that might not be recognising the correct colour.

ahallicks
Aug 16th, 2007, 12:28 PM
Here is the correct one, you can flip it to get the other side

noPCtoday
Aug 16th, 2007, 08:53 PM
If you are simply using those images to create the rounded effect on a solid coloured background and solid coloured foreground, couldn't you just use a jpg or to save webspace a gif (dependant on the quality of course). I'm just wondering if the colour change is a result of the way in which you are saving the file that might not be recognising the correct colour.

I doubt gif will work since 3b3b3b is not a web safe color, jpeg with 95 quality will do the job, (jpeg 100 quality is usally 2x bigger than 95 quality.).

and I don't know why photoshop tells "The Reverend" the color is 3B3B3B, it shows clearly 4C4C4C in fireworks. :c\

btw nice signature there, ahallicks, "write it for FireFox then hack it for IE." i like it.

Bill Posters
Aug 16th, 2007, 09:41 PM
Have you considered using png24 without transparency?
It gives you a much larger colour palette to play with and will still come in at a similar filesize to a gif without being lossy like jpg.

People often only consider png24 when they've something transparent or semi-transparent to display, but it has strengths which enable it to compete with gif in a number of situations.
If the png24 has no areas of transparency, you're aren't going to run into problems that previous versions of IE/Win have had rendering them.

noPCtoday
Aug 16th, 2007, 11:55 PM
Have you considered using png24 without transparency?
It gives you a much larger colour palette to play with and will still come in at a similar filesize to a gif without being lossy like jpg.

People often only consider png24 when they've something transparent or semi-transparent to display, but it has strengths which enable it to compete with gif in a number of situations.
If the png24 has no areas of transparency, you're aren't going to run into problems that previous versions of IE/Win have had rendering them.

totally agree with you,
my current website is mostly dev with png files. Fireworks supports PNG8, 24, 32 output, and it also allows you to compare the output size. PNG is usually much smaller than jpg.
though one correction here, png24 doesn't support transparency, only png8 and png32 supports transparency. It's commonly known that IE doesn't support PNG transparent, however, that only applies on PNG32, PNG8 with transparent is supported by IE6-, but PNG8 only has 256 colors.

VIPStephan
Aug 17th, 2007, 12:14 AM
Címon guys, thatís a tiny corner so whatís all this discussion about JPEG being lossy and PNG 24 color palette, and web safe colors?
I had the problem, too, that when I tried to export a graphic in Photoshop it would alter the colors (make it lighter) for some reason. It could be the general color model in Photoshop (RGB, sRGB, CMYKÖ) thatís causing it. Keeping things websafe is almost unnecessary nowadays as most monitors equally support all colors.

I agree that Fireworks is better for exporting graphics and I never had problems with that one.

Bill Posters
Aug 17th, 2007, 08:18 AM
totally agree with you,
my current website is mostly dev with png files. Fireworks supports PNG8, 24, 32 output, and it also allows you to compare the output size. PNG is usually much smaller than jpg.

though one correction here, png24 doesn't support transparency, only png8 and png32 supports transparency.
PNG32 is more commonly known as PNG24.
24-bit RGB image with 8-bit alpha transparency (32-bit).

I understand that a high-bit PNG without transparency is just a basic PNG24 (i.e. PNG32 w/o 8-bit transparency), but the term 'PNG24' is commonly understood to refer to a 24-bit PNG image which may or may not include 8-bit transparency. Only pedants (and official docs) care to make the distinction between what is commonly understood to be a PNG24 and a PNG32.

lithriel
Aug 17th, 2007, 06:52 PM
It's most likely your color profile settings in Photoshop (being different than what you see with your Browser). Sometimes that will affect the discoloration of your images.

You may also want to check to make sure you are in RGB mode.