Variable node-height CSS trees (a work in progress)

I’ve been playing with CSS trees lately, but all the existing solutions I can find don’t quite do what I want. The requirements are:

  • Support for variable-height nodes (this seems to be the real killer).
  • Plus/minus icons to expand/collapse nodes.
  • Support for scaling the tree with font size, preferably including the padding around the lines and things.
  • Standard tree lines to link nodes together.
  • Fairly clean HTML, although I’m willing to sacrifice this for something that actually works.

Sounds impossible? Well, it’s not: Have a look at what I’ve come up with so far (doesn’t work in Internet Explorer quite yet).

View source to see how it works. Essentially, I nest everything deeply, and use the borders of the nodes to draw the tree lines. I then shift the plus/minus icons and the actual nodes with negative margins so everything lines up. This has the side effect of only requiring two images (one for the plus icon, and one for the minus).

Unfortunately, it currently uses nested CSS child selectors, which of course Internet Explorer doesn’t support (even IE7 doesn’t do this right for multiple concatenated selectors). I’ll try to make this work with IE shortly, but in the meantime, use Firefox. If I can make it fly in IE6/7 then needless to say, I’ll package this up into a Wicket component at a later date (possibly even in time for wicket-extensions 1.3.0 final).

If anyone has seen a better way of doing this, please shout.