Z-index not playing ball

Oveur, Unger, Unger, Dunn

[GuanoLad]

I have a three column layout. The left and right columns are absolutely positioned and fixed width. The central main column has fixed left and right margins.

There is a javascript dropdown menu that should display over the top of everything, which it does in most browsers, but in IE, even though it displays over the central main column correctly, it always displays beneath the items in the left and right columns.

I have used the z-index property in all the logical ways I can think of to make it work properly, but it refuses to figure itself out.

Is there some IE quirk or trick to the z-index proprty that I should be aware of in regards to situations like this?

[wyx2000]

your menu displays under what items? it is a common-known issue that combobox always display on top no matter what z-index you set.

[GuanoLad]

No, it's not a combobox issue, though I do have that happening on a couple of pages anyway. Can't avoid that very easily, unfortunately.

No, these are just regular divs that are displaying on top of the javascript menu dropdowns.

For the most part it's not really an issue, as if you have your browser at anything more than 800 pixels wide the offending columns don't go near the menu anyway, but I would still like to see what's going on for future reference, and fix it in any case.

[Reflection]

Not sure if this is your issue, but z-index will not have an affect on elements that are not 'positioned'. Make sure that all the divs, which you are using z-index on, have position declared. A simple "position:relative;" is sufficient, you don't need to set any coordinates.

[MatthewHSE]

Reflection said it; z-index used to drive me crazy until I figured out those guidelines.

[GuanoLad]

Nope, that's not helping. The left and right columns were already positioned absolutely, and the content of the columns are now positioned relatively as per your suggestion, and it hasn't changed anything.

I am assuming the numbers of the z-index can be anything as long as they are stackable in order... for example, the menus are 50 and the colums are 10 and the main page is 1. That should work, right?

[rocknbil]

You would think so. :D

Something not asked here - this Javascript DD menu, is it something you constructed yourself, one of the divs in your page, or plugged in from one of the free Javascript menus out there?

Second, does your code validate OK? Homesite's validator works pretty well.

[GuanoLad]

The menu was constructed by our programmer. Maybe I should ask him about it, he may know what might be causing it. Though I did ask him about z-indexes and he said he knew almost nothing about them beyond the basics.

I haven't tried to validate my code, but I am pretty sure it's fine. I'll try that.

[dcrombie]

If you can make sense of this article then you're well on the way to a solution ;):

Effect of z-index value to RP and AP blocks [aplus.co.yu]