Troubleshooting JSTree in IE6

Troubleshooting JSTree in IE6

In a project, a problem was identified in the JSTree, when using IE6, usually when a considerable amount of folders were rendered (about 30).

Basically, some parts of the tree nodes text would vanish until we ran the mouse over them(?!?). This happened without a page reload. We would just swap window and come back, or quickly scroll the window up and down.

What we did (André Vieira provided precious assistance):

IE Developer Toolbar was already installed. We opened the toolbar and selected View | Source | DOM (Page). This opens a new window with the generated HTML source (meaning it includes the final HTML version, after the javascript has run). So, we had the JSTree nodes already created.

We copied the HTML and saved it locally. Then, we edited the <script> and stylesheet source, pointing them to the server location. Otherwise, these would not be found and errors would exist.

We opened the created file with IE6. Then it was a trial and error process, by removing parts of the HTML and CSS until the problem disappeared. We eventualy got to the root cause:

CSS Selector ".node" had a vertical padding of 1px. We removed it, and it started working. Just don't ask us why!! Actually, it also worked if we use more than 1px padding. The 1px setting is really the problem! Ggnnhh ... When will people start using a real browser??

An additional note: this selector class is applied to an ANCHOR (link), which is an inline-level element, which means the vertical padding is ignored. So, putting 0px for vertical-padding or 20px is the same. It get's ignored.

And that's it ... another day in the life of a web developer!


Keywords: dtree, extension, Internet Explorer, IE Developer Toolbar