IE 7 PNG Transparency Background Issue

HTML & CSS
1

Hi there,

Here’s a screen grab of what my page is supposed to be looking like (thanks Google Chrome, you really are perfect). The gray gradient horizontal bar is the #stats div, with the #welcome div beneath the gray gradient bar.

And here’s what IE 7 is doing to my PNG background in the #stats div. IE 7 seems to be filling the semi-transparent part of my PNG background (landing/bg-stats.png) that’s supposed to be my drop shadow with an all-black fill (I’m not using a CSS drop shadow – the drop shadow is in my PNG background). At first, I thought IE 7 was somehow applying a border-bottom to the #stats div, but it’s not. IE 7 is altering the PNG background image.


		#stats {
			width: 100%;
			height: 60px;
			background: url('./landing/bg-stats.png') repeat-x; [color=red][b]/* IE 7 IS FILLING THE SEMI-TRANSPARENT PART OF THIS PNG WITH BLACK FILL */[/b][/color]
			font: 13px Shanti;
			text-align: center;
			color: #333;
			
			text-shadow: 1px 1px 1px #d5d5d5;
			filter: dropshadow(color=#d5d5d5, offx=1, offy=1); /* THIS IS FOR [b]TEXT[/b], NOT REFERENCING MY BACKGROUND PROBLEM */
		}

		#welcome-container {
			/* placeholder */
		}
		#welcome {
			width: 960px;
			padding: 30px 0 20px 0;
			margin: 0 auto;
			color: #222; /* #c2c2c2 */
			font: 18px Shanti, sans-serif;
			line-height: 27px;
			background: url('./landing/welcome-arrow.png') no-repeat 457px 315px;
		}

<div id="stats">
	<div class="stats-container">
		<!-- etc... -->
	</div>
</div>

<div id="welcome-container">
	<div id="welcome">
		text here
	</div>
</div>

This seems to be some odd and weird transparency issue with my background. I’ve applied this PNG fix to my page, but it hasn’t fixed my background issue.

http://jquery.andreaseberhard.de/pngFix/index.html

Any ideas of why IE 7 is filling the semi-transparent part of my PNG background with black fill? I’m stumped.

2

IE7 normally handles PNG’s pretty well so you shouldn’t ever need to use a PNG fix, is there a link we can use to see your site as its going to be extremely difficult trying to debug the issue without a physical source to look at.

3

The page is located at http://eggcave.com/landing

Let me know what you think… and that’s what I’ve been thinking about IE 7. It normally handles PNGs fine.

4

I looked at your page in IE9, and the same thing happens. When I disabled the filter drop shadow, the problem went away.

5

As Jeff said the filter is the cause of the issue, the way I look at a website using CSS3 is that all modern browsers should look pretty with shadows and rounded corners but IE shouldn’t get any special treatment as filters slow down the performance of a browser quite a lot when you run performance tests.

6

Gotcha! Thanks for bringing this to my attention, guys. Much more simple than I thought the fix would be.