Calendar behavior (FF vs IE)

[leiras]

Hi all,

I am using <rich:calendar/> in my application, but it is working diferent on IE and FF. Please take a look at my code:

<rich:panel style="width: 100%; height: 100px;">
 <rich:panel style="width: 100%; height: 100px; position: relative;">
 <rich:panel style="width: 200px; height: 20px; position: absolute; left: 10px; top: 10px; text-align: left;">
 <rich:calendar/>
 </rich:panel>
 <h:outputText value="Line 1" style="position: absolute; left: 10px; top: 30px;"/>
 </rich:panel>
</rich:panel>

On FF, the calendar popup floats over the text "Line 1" (behavior that I want), but on IE, the popup "merges" with the text. Am I doing something wrong?
I am using RF 3.2.2.CR2, IE 7.0.6 and FF 2.0.0.
Thanks a lot.

[sergeysmirnov]

Yes, you forgot to take care about one of the famous IE bug.

Read this article: http://aplus.rs/lab/z-pos/. It answers the questions "Why?" and "How to avoid?".

[leiras]

Sergey,

thanks for the article. I read it and got a solution (not very good to me). I should change the way that I layout the components, using only relative positioning. Do you know any other workaround?

[leiras]

Oh sorry,

the article answers my question. Thanks a lot! Here is the solution that works on IE and FF:

<rich:panel style="width: 100%; height: 100px;">
 <rich:panel style="width: 100%; height: 100px; position: relative;">
 <rich:panel style="width: 200px; height: 20px; position: absolute; left: 10px; top: 10px; text-align: left; z-index: 1;">
 <rich:calendar/>
 </rich:panel>
 <h:outputText value="Line 1" style="position: absolute; left: 10px; top: 30px; z-index: 0;"/>
 </rich:panel>
</rich:panel>