Today I realized there is another problem with the tree control. Actually three. First - there are too many SPAN and DIV elements where I think using list (UL) would be more appropriate. Another is that it’s impossible to set width of each of the columns since each column cell is an inline element and width property of the inline elements is ignored. There is also a small problem with the tree floating and any text following it in the document showing right next to the tree and overlap with the absolutely positioned columns.

First problem was easy enough to fix. All nodes are now LI elements tugged inside of a UL element. Small modifications to the CSS style sheet and everything works just as before.

Second problem wasn’t as easy to fix. For the column cells to recognize width attribute they must be block, not inline, but block elements stack on top of each other. Unless they’re flowing, as I found out. And with the column being absolutely positioned the cells float only to the border of the column aligning the way I want them to be.

The last problem required some additional elements. The whole tree is now wrapped inside of a DIV and is folowed by another DIV, inside of the first DIV, with "clear: both".

There’s also a small problem in Mozilla. The tree block is expanding horizontally correctly when the tree is expanded to show all visible nodes, but is reluctant (sometimes fails) to collapse back to the minimal width when the tree collapses and nodes that caused the tree block to expand disappear. I managed to find some additional information here and here.

This Mozilla behavior isn’t as bad as what I experienced with IE. When the browser window gets small enough width IE freezes. This was due to using “white-space: pre” for some of the elements. Ironically “white-space: pre” is what fixes width shrinking behavior in Mozilla. In the end, I managed to balance things out. IE doesn’t freeze anymore (although it does behave incorrectly, when the window width becomes minimal) and Mozilla from time to time works correctly and collapses the width.