View Full Version : Hmm. Hovering DIVs with a PNG dropshadow in IE.

12-15-2005, 05:12 PM
I know this is a known issue in IE. In firefox, you can use a transparent PNG as a background image without problem, but in IE, it has a grey border where it should be transparent. there is a PNG Fix on the web for IE to correctly render the PNG's alpha channel, but ... BUT... the items in the DIV are no longer clickable. D'oh! So what one ends up having to do is create aNOTHER layer on TOP of the other DIV (the one that has the dropshadow background). This works, but is horribly inefficient in my opinion.

Does anyone have their own solution to the transparent PNG/IE problem? I could use a transparent GIF, sure sure, but it renders the dropshadow horribly, making it look more like noise. A PNG is nice and smooth.

I'm building a web app with a pretty picky design team. They *must* have drop shadows under their windows. And all the windows have to have nice, rounded corners, too. Why is HTML so boxy by nature? Yeesh. I'm waiting patiently for the "border-style: rounded;" CSS properly ;) Perhaps even something like "layer-shadow: drop bottom right 15%;" is in our future, and we'll joke about the days we had to use PNGs and images to make this work.

*sigh* -- one can dream. Or, simply, being able to add multiple background images to a single element would be nice.

background: url(...) top left;
background: url(...) top right;
background: url(...) bottom left;
background: url(...) bottom right;

..but oh well.

now I'm just rambling... But if you DO have a working solution for the transparent PNG thing, I'd be most appreciative.


12-15-2005, 05:15 PM
BTW... Not sure, but this might belong in the CSS bucket of the forums. If so, apologies.