tabPanel z-index problem on ie6, ie7 and ie8

[ihpled]

It seems there is a z-index problem if you put a menu inside a tabPanel and you put another tabPanel under the first one. The menu opened inside the firs tabPanel shows up "under" the second tabPanel.
This a code sample:

<rich:tabPanel>
<rich:tab label="Tab1">
<rich:dropDownMenu value="Menu">
<rich:menuItem value="Test Item" />
<rich:menuItem value="Test Item" />
<rich:menuItem value="Test Item" />
</rich:dropDownMenu>
</rich:tab>
</rich:tabPanel>
<rich:tabPanel>
<rich:tab label="Tab2">
</rich:tab>
</rich:tabPanel>

try it yourself!
This problem affects only ie browsers (I tested latest firefox and chrome and it seems all ok)
I hope you solve this annoying problem!

Thanks in advance.

[nbelaevski]

Hello,

That's a known IE bug. Please take a look: http://aplus.rs/lab/z-pos/

[ihpled]

Yes, you are right, ie 6 and ie 7 have a buggy z-index implementation.
Anyway that article shows that ie 8 behaves correctly in every z-index test but tabPanel problem still shows up in ie 8 browser.

[ihpled]

I found a workaround:

using style="position: relative; z-index: 10000;" on the first tabPanel solves the problem!
I tested it on ie 7 and ie 8.
Thanks