June 5, 200818 yr Hitting my head against a brick wall with this... I have a colour gradient that I wanted to repeat horizontally as a background inside a Div. The graphic is a 16-million colour PNG (no transparency), 693 pixels tall, and one pixel wide as usual. So I made a Div, 693 pixels high (to match the graphic), and 730 pixels wide, and selected the image as the background with "repeat-x" to fill the Div horizontally with the graphic. Problem is, the image looks different in IE7 and Firefox. Firefox displays the gradient faithfully, whereas IE7 doesn't. You can see a spliced comparison between the two browsers here: Firefox is displaying it correctly, but why is IE showing it different and darker? My code is shown below:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #TestArea { background-image: url(http://URL.com/image.png); background-repeat: repeat-x; height: 693px; width: 730px; } --> </style> </head> <body> <div id="TestArea"> </div> </body> </html> Thanks!
June 5, 200818 yr Hi ie can render .png colours differently, try saving as .jpg and test to see if it renders the same in both browsers. Pat
June 6, 200818 yr Author Hi ie can render .png colours differently, try saving as .jpg and test to see if it renders the same in both browsers. Pat Thanks. It appears IE (and Safari) is the oddball yet again, and cannot accurately deal with PNGs that have gamma correction data embedded into them. Unfortunately you can't stop Photoshop or Paint Shop Pro adding this gamma data when you save out PNGs. Result: I've therefore used the free graphic editor GIMP to import the PNG and then save it out again with the gamma correction data removed from the file, and the new PNG image is now faithfully displayed on all browsers (including IE and Safari). You could of course use the GIF format instead if the number of colours in your image is <256 and you don't need alpha transparency, but PNG still offers significantly lower file-sizes than GIF in general use (and supports up to 16M colours, unlike GIF) so the GIMP method for tweaking the PNGs works great. Hope this helps others.
Create an account or sign in to comment