niceScroll generates the scrollbars down from the top of the destination div

Question

I am trying to use niceScroll for the first time and found the scrollbars far down from the top of the destination div tag by almost 30px. Both the vertical and horizontal bars are calculated improperly.. the div I am trying to use it on is

<div style=" height: 350px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;" id="divctcontent">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div style="width: 100%; background-color: rgb(240,240,240); border-top: 1px solid #ccc;">
                <asp:HyperLink ID="ButtonManageChapters" runat="server" Text="Edit Chapters" Font-Size="X-Small"></asp:HyperLink>
            </div>
            <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged" CssClass="stylo" Font-Size="12px" ExpandDepth="0">
                <SelectedNodeStyle BackColor="#DDDDDD" />
            </asp:TreeView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
        </Triggers>
    </asp:UpdatePanel>
</div>