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; /* IE 7 IS FILLING THE SEMI-TRANSPARENT PART OF THIS PNG WITH BLACK FILL */
			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 TEXT, 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 id="welcome-container">
	<div id="welcome">
		text here
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.


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