How to style a treeview in CSS?

HTML & CSS
1

My boss wanted from me to start styling .NET components in CSS. The hardest task to accomplish here is to successfully style a TreeView component - which will show nodes in a tree menu order.

Here is the HTML code how the component is parsed:

<div class="AspNet-TreeView" id="TreeView1">
	<ul id="TreeView1_UL">
		<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf"> <a href="javascript:__doPostBack('TreeView1','sNew Node')"> Menu 1</a> </li>
		<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf"> <a href="javascript:__doPostBack('TreeView1','sNew Node')"> Menu 2</a> </li>
		<li class="AspNet-TreeView-Root"> <span class="AspNet-TreeView-Expand" onClick="ExpandCollapse__AspNetTreeView(this)">&nbsp;</span> <a href="javascript:__doPostBack('TreeView1','sNew Node')"> Menu 3</a>
			<ul class="AspNet-TreeView-Hide">
				<li class="AspNet-TreeView-Leaf"> <a href="javascript:__doPostBack('TreeView1','sNew Node\\\\Submenu 1')"> Submenu 1</a> </li>
				<li class="AspNet-TreeView-Leaf"> <a href="javascript:__doPostBack('TreeView1','sNew Node\\\\Submenu 2')"> Submenu 2</a> </li>
			</ul>
		</li>
		<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf"> <a href="javascript:__doPostBack('TreeView1','sNew Node')"> Menu 4</a> </li>
	</ul>
</div>

Using the pre-defined classes I end up doing this kind of CSS:

.AspNet-TreeView {
    width: 200px;
    border-top: solid 1px #DDD;
}

.AspNet-TreeView ul {
    list-style: none;
}

.AspNet-TreeView-Leaf {
    border-bottom: solid 1px #DDD;
    background: url(../../images/structure/node-dot.gif) 8px 9px no-repeat;
}

.AspNet-TreeView-Root {
    border-bottom: solid 1px #DDD;
}

.AspNet-TreeView-Root a {
    display: block;
    width: 170px;
    margin-left: 20px;
    padding: 5px 5px 5px 5px;
}

.AspNet-TreeView-Selected {
    background: #F6F6F6 url(../../images/structure/arrow-right.gif) 8px 9px no-repeat;
}

.AspNet-TreeView-Expand {
    display: block;
    float: left;
    margin: 9px 0px 0px 8px;
    padding: 6px 4px 5px 4px;
    height: 0px !important;
    background: url(../../images/structure/node-plus.gif) 0px 0px no-repeat;
    cursor: pointer;
}

.AspNet-TreeView-Collapse {
    display: block;
    float: left;
    margin: 9px 0px 0px 8px;
    padding: 6px 4px 5px 4px;
    height: 0px !important;
    background: url(../../images/structure/node-minus.gif) 0px 0px no-repeat;
    cursor: pointer;
}

.AspNet-TreeView-Show li {
      border-top: solid 1px #DDD;
      background-position: 28px 9px;
}

.AspNet-TreeView-Hide {
    display: none;
}

.AspNet-TreeView ul li ul li {
    text-indent: 20px;
    border-bottom: none;
    font-size: 11px;
}

It basically works in Firefox and Opera, but not in IE6. I guess I need to implement some IE specific bug fixes to the “AspNet-TreeView-Expand” and “AspNet-TreeView-Collapse” classes, but don’t know how? Any tips?

2

A few problems for IE6 here.

As the <a>s have a width set, HasLayout is also triggered for IE which will then not allow the left margin on the <a> to slide behind the float. Easiest approach would be to absolutely position the expand/collapse spans instead of floating, and the <li>s will need a relative position to provide the reference. The margins on the span will then be changed to top/left position coordinates. IE6 also needs HasLayout triggered on the <li>s, so setting their width will do that. Finally, the default margins / padding on the <ul> needs to be zeroed otherwise the <ul> will not fit in the width of the div - this may already be done with a reset css rule, but not sure as we don’t know the full page css.

.AspNet-TreeView ul {
	list-style: none;
	[COLOR="Red"]padding: 0;
	margin: 0;[/COLOR]
}

.AspNet-TreeView-Root {
	border-bottom: solid 1px #DDD;
	[COLOR="Red"]position: relative;
	width: 200px;[/COLOR]
}

.AspNet-TreeView-Expand {
	padding: 6px 4px 5px 4px;
	height: 0px !important;
	background: url(../../images/structure/node-plus.gif) 0px 0px no-repeat;
	cursor: pointer;
	[COLOR="Red"]position: absolute;
	font-size: 1px;
	top: 9px;
	left: 8px;[/COLOR]
}

.AspNet-TreeView-Collapse {
	padding: 6px 4px 5px 4px;
	height: 0px !important;
	background: url(../../images/structure/node-minus.gif) 0px 0px no-repeat;
	cursor: pointer;
	[COLOR="Red"]position: absolute;
	font-size: 1px;
	top: 9px;
	left: 8px;[/COLOR]
}

Edit: Also the font sizes for the spans will need to be reduced as IE6 will not allow them to be a smaller height than the current font size - updated in the code above

3

Wow thanks. I made some adjustments and it works perfectly! Thanks again Centauri!

4