Not sure if I really understand the problem but here goes:
I have a site http://opensecretcommunications.com/...A/indexnew.php you will notice when you go to a page with extra length/more content a scroll bar appears to adjust for this content.

The problem arises when you scroll on a page with extra content and then go to another page with extra content the scroll bar does not align to the top.

For example: go to about us, scroll then go to contact us, the scroll bar does not realign to the top.

Anyways feel free to move this thread around, I think this is a css type problem, thanks again for any help.

Regards

This is because you have the height and overflow set on the div #left, but are changing the visible div within it, when the tab is pressed. Because the scrollbar it attached to #left, naturally it is staying in the same place.

If you place a common class on all of the dynamic divs (the ones that are being hidden and revealed), then remove the overflow from #left, then place in on the new class, your problem should be solved. Of course, for this to work, you will need to set a height on the new class, to make it fill up #left completely.

Well I understand what you mean but I am not sure how to implement it. Do i wrap the visible block in one div and the hidden ones in another? Anyways thanks for the reply i know the answer is there.

Regards

You don't need any more divs. All you need is a common class on the divs that are being hidden and revealed by the tabs script, which are the divs that are nested inside of #left. Or you could even target these divs in the CSS like this:
CSS

#left div {
overflow: auto;
height: /*whatever is appropriate px or % */;
}

And remove the overflow: auto from #left

This is what I have:

    #left div {
        overflow:auto; 
        height: 455px;
        
        }
    #left {
        float:left;
        width:447px;
        height:455px;
        min-height:455px;
        margin:0;
        background-image:url('images/leftBG.gif');
        background-repeat:repeat-y;
        padding-left:25px; padding-right:25px; padding-top:1px; padding-bottom:16px;

        
        }

That doesn't seem to work, sorry for being so lame, any pointers?

Not finding that code on the live-site. Will you push it live so I can Firebug it?

Ok, to keep things separate I put everything here http://opensecretcommunications.com/...t/indexnew.php I really appreciate the extra help.

You need to make the height on the #left div 16px taller to fill up the extra space caused by the padding-bottom of #left, which means the height should be 471px instead of 455px.

Also, remove the 25px padding on the right of #left, then add it to #left div. Increase the width of #left by 25px so that it fills the same space.

OK, made the changes but it still doesn't behave correctly, are you seeing the same thing?

Hmmm.... it's doing what I wanted it to, in FF3(I notice that the #left div is a bit to long in IE7) Am I misunderstanding what you want?

You are correct it is working, took me a second to realize that the scroll bar position is retained even when you switch to different tabs. Excellent work I really do appreciate the help.

You're welcome