The good old overlapping menu, how to z-index an activeX

Question

I have an ActiveX on a page... I know ... ActiveX ... blarghhh!

That for some logic business reason we had to go with ActiveX, but the problem is that I can't make the ActiveX <object> to be beneath anything else ...

it's extremely weird!

Live plain example and Live example with iframe wrapper

You can try the example, but remember that the ActiveX only work in Internet Explorer, and no matter what version for the ActiveX, it will always run.

This problem I'm facing is the overlapping one:

Playing with position and z-index does nothing and I have no more ideas :-(

Answer 1

ActiveX controls are rendered as "windowed" elements in Internet Explorer, whereas most other elements (particularly in newer versions of IE) are "windowless". Flash has a wmode option for whether it draws windowless or windowed but, in my experience, this is very difficult to achieve, especially if the object is written in .NET and not C++.

All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.

All windowless elements are rendered on the same MSHTML plane, and windowed elements draw on a separate MSHTML plane. You can use z-index to manipulate elements on the same plane but not to mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane.

> http://support.microsoft.com/kb/177378

There are two potential solutions I can think of. You could try the iframe "cutout" solution, which explains that you can use iframes to "cut out" part of the plug-in for the HTML below to show through.

The second solution is to draw your popup menus in a popup object. These are separate windows that render in front of your web page and can even exceed the boundaries of the document — with some limitations — the major downside being that they don't have shadows so this might uglify your styling a little.