Customised Scroller Disappearing With Tabs

Question

I would like some help with this problem please.

I am trying to create a php website with tabs and to keep the same customised scroller in every tab. These scroller codes I found works fine but the customised scroll bar stops showing in tab 2. I notice that this happens when I start using the functions for the tabs (CSS & Javascript).

The Sample website can be found here --> http://www.swan10.nl/stuff/scroll/Scroller.php

Tab Functions and Scroll Functions have been marked accordingly in Scroller.php.

The codes for the tabs were also found and modified, perhaps one of them is cancelling the other? If yes, will there be a way to fix this?

This problem has been frustrating me for hours now...Thank you for your help in advance.

Answer 1

I am guessing it is because you are reusing the same id in your html. You have two divs that both use id="mycustomscroll" . ID's must be unique to each element on the page. Your flexcrollstyles.css files targets an element with that id to style the scrollbar.

#mycustomscroll {
 /* Typical fixed height and fixed width example */
 width: 490px;
 height: 520px;
 overflow: auto;
 /* IE overflow fix, position must be relative or absolute*/
 position: relative;
 padding: 5px;
 background: none;
}

If you want to resuse css styles across elements then you should look into using classes first. Until you can produce clean code it is difficult for people here to diagnose what is wrong. But fix that to start.