I was working on a site tonight after being away from it for over three months. I came across some CSS and it took me a while to remember what it was for. I gleaned this online somewhere ages ago, but kudos and credit to the author whoever they are!

Jumping Treeview

 

For some time I have been having problems using the ASP.NET TreeView control in Sitemaps; every time I would hover over one of the parent nodes it would jump up and down. Here's some sample markup and the CSS to fix it in Firefox:

        <div id="idTreeView">
            <asp:TreeView ID="TreeView1" runat="server"                     DataSourceID="SiteMapDataSource1"
                    HoverNodeStyle-Height="0" Font-Bold="true" ImageSet="BulletedList">
                <RootNodeStyle Font-Bold="True" />
                <ParentNodeStyle VerticalPadding="0px" Font-Bold="True"                     Font-Underline="false"  />
                <HoverNodeStyle Font-Underline="false" ForeColor="#5555DD" />
                <NodeStyle Font-Bold="False" Font-Size="8pt" CssClass="sitelink"
                    ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px"                     VerticalPadding="0px" />
            </asp:TreeView>
           
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </div>

 

        div#idTreeView img
        {
            display: block;
            float: left;
        }

        div#idTreeView div
        {
            display: inline-block;
        }

        div#idTreeView .sitelink a
        {
            text-decoration:none;
        }

 

Tags: ,

ASP.NET | CSS