Page content disappears when showing jQuery UI datepicker in IE7

Question

Hi

I'm using jQuery UI:
<script type="text/javascript" src="/jscripts/jquery-1.4.min.js"></script> <script type="text/javascript" src="/jscripts/jquery-ui-1.8.2.custom.min.js"></script>
and IE7 (corporate rule!)

When datepicker shows up (enclosed in form and surrounding div), parent div content disappears.
It shows up again when I move the mouse over menu (which is in another div).
This is not the case when I switch over to FireFox, unfortunatelly IE is the must in my project.

Page layout CSS is too complex to show it here, but maybe you faced similar issue
and you know the solution for such behaviour.
I was trying to find some guidelines, what CSS attribute should be set for div (or form) where datepicker field is placed, but could not find anything that worked.

Thank you for your support,
Zbigniew

Answer 1

I've had similar problem with the datepicker and IE7. The issue was triggered by having an element on the page with the CSS float attribute set. When the datepicker was opened various pieces of content would disappear.

I was able to work around the issue by applying either of the following CSS atributes to each of the affected elements that where disappearing:

  overflow: auto;
  position: relative;

Hope that helps;