IE can't handle draggable div with png's?

Question

I'm creating a draggable/resizable menu with all the neccesary links to control the website, a CMS-bar kind of. I'm using some png's to create the background, set with some transparency.

It works great in FF, but in IE my png's get transformed after I drag my menu around: Screenshots: http://img.photobucket.com/albums/v739/Alienna/falcon/drag.png

Also, that big empty space? That's a log-out button(div with background-image and a-element), of wich only the :hover status seems to work, and only before dragging ...

Any fixes for this? I thought IE's png problems were gone after IE6(tested this ie IE7/8) ...

Answer 1

I'm not 100% sure, but I assume this is the old "PNGs with alpha transparency in DIVs with alpha transparency" bug that is present in all IEs including 8. See here for more info.

In short, IE has difficulties with alpha transparencies in PNGs when those are in containers that themselves have an opacity different from 1. When you drag the element, its opacity changes, and the bug comes into play.