Hi you all,

here´s my case:

When loading the hompage of the site I am working on, it looks like this:

In the upper part, you can see <div id="wrapper1">content1< /div>, which shows an image and some text, surrounded by a grey border

in the lower part,  you can see <div id="wrapper2">content2< /div>, which contains some text within a jquery widget with customizable scrollbar and some images on the right side, also surrounded by a grey border.

Using a script (jquery) and clicking on wrapper1, wrapper 1 slides up and wrapper2 slides down. This looks pretty cool when in action. And the result can be seen in the picture below.

As you can see, wrapper1 "disappeared" and wrapper2 can be seen now where wrapper1 was before the click.

In order NOT to show wrapper1 and wrapper 2 at the same time, I used "display:none" in the css-rule for #wrapper2

So now the homepage is being displayed as it should. Wrapper1 is shown, wrapper 2 is not shown.

When I now click on wrapper1, is slides up and wrapper2 slides down. So up to this point, everything is perfect.

The only problem: The scrollbar disappeared, as you can see in the next image.

The problem seems to have to do with the "display:none" rule for #wrapper2.

When executing the script by clicking on wrapper1, this div gets the inline "style=display:none", whereas wrapper2 gets the inline "style=display:block".

The initial css-rule "display:none" for #wrapper2 then seems to be overwritten. BUT: the scrollbar disappears.

I tried the following:

I used exactly the same "scenario" as the script does: Adhere to wrapper1-div the inline "style=display:none" and to wrapper2-div the inline "style=display:block". In this case the scrollbar DOES appear!

Can anyone help me to get this problem solved?

Thank you very much in advance...

Hermann