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.