IE (Z-index rendering problem)

Question

Hi,

I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under another control (RadDock) when the menu expands.

This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)

The menu control needs to be rendered OVER the other control.

I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.

What is the easiest to solve this problem for IE?

Also do you know if this z-index problem has been resolved in the (pending?) IE8?

This Q is not meant to start a browser flame war. Please only respond if you have a relevant comment.

Thank you kindly.

Answer 1

I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.

Answer 2

I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.

If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.