All Things Patrick - Working Hard to be Lazy!

I ran into an issue in IE a couple months back & I've seen a couple of other people mention they're having the same issue. It's something that once you've solved in a project you usually don't think about it again... at least until you run into the problem again in a different project.

From what I can tell this isn't always an issue, just happens when certain conditions are met (& I've not completely figured out what all of them are). Usually the person sees what they expect in Firefox, Opera, & Safari, but the bottom of their "popup" is disappearing in IE. This happens a lot with drop down menus (bad for useability, but clients think they're nifty!) & anything else where using the CSS z-index would fix it... if z-index worked correctly in IE.

Please note - This has nothing to do with the annoyance of certain form elements appearing above everything no matter what you do (in this case you have to set visibility on those form elements to hidden & then reshow them later).

Also note - I don't know if this applies to IE7 or not.

I dislike using it as an example, but it's an example everybody is familiar with whether they like them or not. Let's say you have a simple 3 division layout (#header, #body, & #footer). In the #header you have a drop down menu that, when displayed correctly, should appear in the z-index layer above everything in #body. As long as you set the z-index higher than everything in #body this should work fine in Firefox, Opera, & Safari.

Like I said, I'm not sure at which point IE breaks & appears to cut off the bottom of the menu. It could be because some item in #body is floated or perhaps even if #body itself is floated. Whatever the actual cause, it seems as though you can't get the layer you're trying to effect to do anything correctly.

I believe that IE is having issues in setting default values for it's own internal z-index if you will. Typically as a browser parses through HTML it automatically layers stuff that comes last over the top of stuff that came first. This is the correct default behavior of browsers. Unfortunately it seems IE carries it a bit to far.

IE appears to create containers & z-index only applies to elements at equal levels within that container. So even though you set a z-index of 500 on that drop down menu, that z-index of 500 only applies to items within the #header container & doesn't apply to any elements within the #body container. Talk about frustrating...

So what's the solution I came up with? In your CSS for IE you need to reorder the z-index sequence for IE...

#header {
    z-index: 3;
}

#body {
 z-index: 2;
}

#footer {
       z-index: 1;
}

This should force IE to reposition the #header container above the other container layers as well as forcing #body container above the #footer container. It's a dirty hack imo so don't use it unless you have to.