Colors appearing differnet in IE, FireFox, Safari?

  • Thread starter Thread starter Mark B
  • Start date Start date
M

Mark B

At www.gertes.com, I have a blue background. I also have a gradient blue
that at the bottom that merges smoothly into the blue background color.

It works fine on IE but on Firefox and Safari, the color doesn't merge
smoothly -- it shows a hard blue edge. Anyone know why?
 
Atwww.gertes.com, I have a blue background. I also have a gradient blue
that at the bottom that merges smoothly into the blue background color.

It works fine on IE but on Firefox and Safari, the color doesn't merge
smoothly -- it shows a hard blue edge. Anyone know why?
Click to expand...

The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
 
Thanks. Any downside to GIF here? Loss of clarity?


Atwww.gertes.com, I have a blue background. I also have a gradient blue
that at the bottom that merges smoothly into the blue background color.

It works fine on IE but on Firefox and Safari, the color doesn't merge
smoothly -- it shows a hard blue edge. Anyone know why?
Click to expand...

The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
 
Just apply the IE .PNG fix for IE to any page that you wish to use .PNG
files on:

http://homepage.ntlworld.com/bobosola/

-Scott


Atwww.gertes.com, I have a blue background. I also have a gradient blue
that at the bottom that merges smoothly into the blue background color.

It works fine on IE but on Firefox and Safari, the color doesn't merge
smoothly -- it shows a hard blue edge. Anyone know why?
Click to expand...

The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
 
Thanks. All changed and tested OK. I ended up using #034B7A.

I converted the PNG to GIF with 192 colors using
http://tools.dynamicdrive.com/imageoptimizer/index.php

I only have IE7 here. If someone has IE8 and wants to let me know if the
gradient merge doesn't appear smooth on
http://www.gertes.com/pages/about/what_is/default.aspx I'd appreciate it.


Atwww.gertes.com, I have a blue background. I also have a gradient blue
that at the bottom that merges smoothly into the blue background color.

It works fine on IE but on Firefox and Safari, the color doesn't merge
smoothly -- it shows a hard blue edge. Anyone know why?
Click to expand...

The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
 
Thanks. Any downside to GIF here? Loss of clarity?
Click to expand...

In general, gif result with less quality. In your case, it's not a
high quality picture, so I think gif should be okay. I tested it
myself and it looks ok to me in both browsers. Note, I mentioned other
color. This is because gif will be not that dark as png in IE.
 
Thanks. All changed and tested OK. I ended up using #034B7A.

I converted the PNG to GIF with 192 colors usinghttp://tools.dynamicdrive..com/imageoptimizer/index.php

I only have IE7 here. If someone has IE8 and wants to let me know if the
gradient merge doesn't appear smooth onhttp://www.gertes.com/pages/about/what_is/default.aspxI'd appreciate it.





The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
Click to expand...

It's working well now! The only thing I can tell is that transition
inside picture is not smooth. Maybe you can play with it a little bit
and try to save with more colors if it's critical for you. In other
case, the problem has been solved and I see no bottom "border" as it
was yesterday.

IE8 - ok
Safari4 - ok
FF3.5 - ok
Chrom4 - ok
 
Just apply the IE .PNG fix for IE to any page that you wish to use .PNG
files on:

http://homepage.ntlworld.com/bobosola/

-Scott





The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
Click to expand...

Scott,

the link says it's all about background transparency for IE v.5.5 and
6 only, which is not the case here. The problem here was that IE (up
to v.8) shows PNGs darker as in FF or Safari. There was no
transparency used.
 
Yes thanks very much again.

I tried with 256 color gif and also 192 color. I decided on 192 as 256 had
one not-so-smooth area but 192 had a couple of such areas and as such looked
more uniform. Anyway I think it will be OK.

I got the new back color by opening the gif in MSPaint, Zooming to 800% then
color-picking the bottom pixel line.

It's working well now! The only thing I can tell is that transition
inside picture is not smooth. Maybe you can play with it a little bit
and try to save with more colors if it's critical for you. In other
case, the problem has been solved and I see no bottom "border" as it
was yesterday.

IE8 - ok
Safari4 - ok
FF3.5 - ok
Chrom4 - ok
 
Yes thanks very much again.

I tried with 256 color gif and also 192 color. I decided on 192 as 256 had
one not-so-smooth area but 192 had a couple of such areas and as such looked
more uniform. Anyway I think it will be OK.

I got the new back color by opening the gif in MSPaint, Zooming to 800% then
color-picking the bottom pixel line.



It's working well now! The only thing I can tell is that transition
inside picture is not smooth. Maybe you can play with it a little bit
and try to save with more colors if it's critical for you. In other
case, the problem has been solved and I see no bottom "border" as it
was yesterday.

IE8 - ok
Safari4 - ok
FF3.5 - ok
Chrom4 - ok
Click to expand...

Glad, that it works now
Cheers!
 
Hi Alexey,

I believe this is part of the same issue. Applying the patch for the
well-known bug should correct the problem.

-Scott

Just apply the IE .PNG fix for IE to any page that you wish to use .PNG
files on:

http://homepage.ntlworld.com/bobosola/

-Scott





The problem here is that IE renders PNG differently as Firefox and
Safari. It looks like PNGs appear darker in IE and that's why you see
dark blue in other browsers. I would suggest either save
page_background.png as GIF and change bgcolor to #013E6D, or use
different CSS for Firefox and other browsers.
Click to expand...

Scott,

the link says it's all about background transparency for IE v.5.5 and
6 only, which is not the case here. The problem here was that IE (up
to v.8) shows PNGs darker as in FF or Safari. There was no
transparency used.
 
Back
Top