SitePoint.com

Siebird · May 20, 2009, 11:33

Hi,

This is a first for me. I'm having an issue displaying a transparent .png in IE7. It seems to fade and not repeat??? Very odd. Here is a live demo: http://www.vycomplastics.com/

CSS:

CSS Code:

.col-3, .col-4, .col-9 {background: url(layout/bg-blue.png) repeat;border:1px solid #04A3D5;margin-right:13px;margin-left:13px;}

logic_earth · May 20, 2009, 15:09

I'm not getting that issues running IE 7 from a Windows XP VM.

melissapbr · May 20, 2009, 15:10

It looks correct in IE7 to me (identical to FF3). Can you compare in a screenshot and point to the difference?

RyanReese · May 20, 2009, 16:47

Quote:

Originally Posted by Siebird

Hi,

This is a first for me. I'm having an issue displaying a transparent .png in IE7. It seems to fade and not repeat??? Very odd. Here is a live demo: http://www.vycomplastics.com/

CSS:

CSS Code:

.col-3, .col-4, .col-9 {background: url(layout/bg-blue.png) repeat;border:1px solid #04A3D5;margin-right:13px;margin-left:13px;}

Are you sure this is not IE6? They are the only browsers that have problems with PNG but frmo the sounds of it you are just running into a cache issue.

Siebird · May 26, 2009, 06:34

Sorry for the delay, I was out on vacation.

Anyways, attached is the screen shot, and you can see how the png fades out. I have IE tester installed and wondering if that is causing the issue?

tlandelin · Jun 10, 2009, 14:50

I also have the same problem on a site I'm developing. I'm testing it with two computers, one running IE V. 8.0.6001.18241 and the other running IE V. 8.0.6001.18702. The first one displays the repeating PNG image without fading and the other makes it fade out incorrectly.

sspcc · Jun 30, 2009, 12:59

For those who may find this thread, we had a similar issue here. The odd thing was that on multiple different machines, running the same version of IE7, some would have the issue (of the background .png fading from the top left corner rather than repeating) and some would not. Why I don't know, but what I did discover was that it may have to do with image size. The .png that was having problems on some browsers was a 1 x 1 pixel. I changed it to 10 x 10 and voila! no problem displaying on any of the IE 7 browsers.

Scott

May 20, 2009, 11:33	#1
Siebird Zero Point Zero Join Date: Feb 2007 Location: York, PA Posts: 456	IE7 png bug? transparent png fades??? Hi, This is a first for me. I'm having an issue displaying a transparent .png in IE7. It seems to fade and not repeat??? Very odd. Here is a live demo: http://www.vycomplastics.com/ CSS: CSS Code: .col-3, .col-4, .col-9 {background: url(layout/bg-blue.png) repeat;border:1px solid #04A3D5;margin-right:13px;margin-left:13px;}

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

May 20, 2009, 15:09	#2
logic_earth ¬.¬ shoooo... Join Date: Oct 2005 Location: CA Posts: 7,022	I'm not getting that issues running IE 7 from a Windows XP VM.

May 20, 2009, 15:10	#3
melissapbr SitePoint Enthusiast Join Date: Feb 2009 Location: Baton Rouge, LA Posts: 86	It looks correct in IE7 to me (identical to FF3). Can you compare in a screenshot and point to the difference?

Jun 10, 2009, 14:50	#6
tlandelin SitePoint Member Join Date: Jun 2009 Posts: 1	I also have the same problem on a site I'm developing. I'm testing it with two computers, one running IE V. 8.0.6001.18241 and the other running IE V. 8.0.6001.18702. The first one displays the repeating PNG image without fading and the other makes it fade out incorrectly.

Jun 30, 2009, 12:59	#7
sspcc SitePoint Member Join Date: Jun 2009 Posts: 4	For those who may find this thread, we had a similar issue here. The odd thing was that on multiple different machines, running the same version of IE7, some would have the issue (of the background .png fading from the top left corner rather than repeating) and some would not. Why I don't know, but what I did discover was that it may have to do with image size. The .png that was having problems on some browsers was a 1 x 1 pixel. I changed it to 10 x 10 and voila! no problem displaying on any of the IE 7 browsers. Scott