Hi folks,
I'm wondering if any of you can properly diagnose this issue; I've spent a fair amount of time on it now, and while I've nailed down some specific characteristics of what is going on, I'm no closer to identifying a solution to the problem.
Here are the symptoms. There are two transparent PNGs with drop shadow in the page layout (to simplify). One of them comes down from the top (see the dark bar at the top with the grey border) and is supposed to create a drop shadow on the layers below it, and one comes out from the central section (fixed width column) of the page to create a drop-shadow on the layers below. The divs are stacked (i.e. z-index) with the top (dark bar w/thick grey border) being highest in the stack, the central content (the yellow on the right is the left side of an image embedded in the center of the page):
At the top of the page is a greenish-grey background image. The problem is that the drop-shadow from the top bar produces a whitish, blotchy line on the greenish-grey background and the central content as well (see image above).
However, interestingly, when I comment out the background image code (the greenish-grey), the shadow starts looking right, *even for the center column*--it is as though the background of the div *below* the center column is disrupting the drop-shadow for the center column when it is in place!
I cannot for the life of me figure out why this is. For the record, the drop-shadow coming from the main central content column (yellow again) down to the layers below that uses the *exact same technique* and it works fine, no matter what is behind it (i.e., still works fine with the greenish-grey background image in the div behind it).
So, it seems like there is something weird going on with the drop-shadow itself, as though it doesn't have the right coloration? I'm just not sure. Anyone experienced this before? Is this an issue with the PNGs I'm using for drop-shadow, or something with my CSS (not that there is much to it; just divs laid on top of each other). I have the psd files that the designer gave me, and I've been cutting the images myself using drop shadow that he made, but while I can do that sort of thing I'm pretty bad otherwise with photoshop (that is, I'm not sure how to analyze the drop-shadows to see if there is anything different between them).
Thanks for any help you can provide!
Best,
Dave