A Quick IE6 Z-Index Fix

Yeah, IE6, old news, 5+ years old, you'd think it wasn't a problem, but alas, it is still around 10% of the average usage, and in some b2b situations, much higher if you are dealing with a web app that has corporate clients that still have it installed across their network.

The later is the issue I am working with. Combine that with the fact that we are also using a lot of AJAX and floating divs and modal dialogs that the problem is cropping up.

When fighting IE6 these days it boils down to how much you plan to invest in fixing, and how to do it without lessening the rest of the application. The z-index issues tend to need fixing. The biggest problem is the z-index of elements that IE considers ActiveX object, windowed opject like form select fields. Those are always considered the highest z-index of everything on the page, which makes modal dialogs or other floating divs a real nightmare to work with.

I chose the route of the quickest and easiest fix...there are options of using iFrames, which I immediately throw out, and various, ugly hacks of CSS and JavaScript, just seems cludgy.

My fix that took minutes to install and works great...nothing fancy; just before the modal dialog pops up, hide the form with the style.visibility CSS function to hide the form without moving all the rest of the elements around. If you use style.display the rest of the page will move around to replace that now empty space, with visibility, the space is still "used" it's just invisible. Then, when the dialog/div is closed, make it visible again.

Seemed to me to be the best option, with the least time involved in implementing. Of course, you can set up the functions to only make the form disappear if it's an IE6 browser visiting, otherwise, skip it and have it behave as typical of any browser created in the last few years.

Then, after all that is done, look in to a plan to sunset support for IE6.