Problem with jQuery & IE & overflow:auto

Problem with jQuery & IE & overflow:auto

Hi,

I have included jquery in the HTML header of my page:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

So far I only included this but did not use jQuery in any way.

My page also uses the "overflow: auto;" CSS-property for the body element to hide the scroll bar on the right side.

With Firefox this works fine but with IE I often get a layout problem. When I see the layout problem, the background color extends to the border on the right hand side but the other elements are set in the position where they would be if the scroll bar would be there. This problem does not occur ALL the time but MOST of the time. I can reload the same page a couple of times and maybe for 2/3 of the tries I see the elements "hanging in the air", while for the other 1/3 they are correctly alligned to the border of the browser window.

The attached screenshots show this. In issue.jpg the elements are wrong, in no_issue.jpg they are correct. Both where shot from the same page, I just hit the reload button a couple of times.

When I remove the overflow:auto property then the layout is correct all the time.

Also, when I remove the script element that includes jQuery and leave in overflow:auto the layout is correct all the time.

I would appreciate any advise on solving this issue.

Kind regards, Robert