As more and more javascript and AJAX are used IE6s incompetencies are increasingly becoming apparent. It really is getting on now. This is especially the case with transparencies and overlays.
The latest that we’ve been running into here quite a bit lately (as the designers use more and more modal windows) is the fact that whatever z-index trickery you try and perform, a select box will always display above any intersecting elements. You can see an example below:
Quite ugly, non? After a bit of digging around a while back we found the official reasoning:
Windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element. The problem is based on the historical fact that form fields have typically been rendered by the operating system/windowing system, where everything else on the page is rendered by the browser.
Luckily there’s a relatively simple way to solve this – IFRAMES. Not only are they good for cross domain AJAX requests, they save us here again by their ability to exist in the z-index for both page controls and windowed controls at the same time. Simply placing an iframe element behind (and inbetween in the z-index) your modal / overlay will block the windowed controls from view, like so:
Remarkably simply, setting the iframes opacity will also still block out the windowed controls underneath.
iframe.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;
So you can have any kind of transparent elements in your overlay.
