It’s been quite some time since I blogged. I’ve been super busy on some larger freelance projects that will soon (hopefully) hit my portfolio. At work I’ve been dealing mostly with CSS bugs on our internal web app UI and after knocking out a particularly difficult one this afternoon I decided to share the experience with you, my faithful readers. There is some documentation out there but no “sure-thing” fixes.
In-frame JavaScript pop ups are quite popular these days. Basically these are divs that start out hidden when the page loads but can later be displayed by clicking a button on the page. These may be tool tips, images, forms or other elements that are optional to the usage of the UI.
Many times the z-index attribute of the position style is used to pull these elements to the very front of the screen so they float over the rest of the UI. The problem in IE 6 and 7 (not yet tested in IE8 ) is that if any of the elements underneath the pop up div are positioned relatively or absolutely, they are on their own z-index scale and thus show up on top of your pop up element no matter how high that element’s z-index is.
It’s a real pain to deal with especially because often these pop up elements are added in after the basic UI is created, thus making it hard to simply remove the positioning on the other elements.
Here are a couple of the solutions I found:
- Remove the positioning and use margins to position. This obviously will not always work without considerable work to get your UI layout looking right again.
- Set a negative z-index on the elements that are appearing in front of your pop up. Again this isn’t always possible. Often setting a z-index negatively will drop the element underneath the UI itself rendering it completely invisible.
- Pull the pop up div out of all parent divs and place it at the top of your code. This ensures that there are no other positioning elements that are conflicting with the z-index of your pop up. Again - not always doable.
For my particular situation I had to employ all of these tactics in different spots on the page. It was a brutal couple days of bug fixing and I am glad to be through with it.
I found quite a lot of good info on the subject here:
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html