Javascript/CSS Tree Renders Improperly In Safari

There is a Javascript tree put out by Netscape that renders in most of the major browsers: IE, Netscape, Mozilla, Firefox, and Camino to name a few. However, in Safari (and, I believe, Opera), instead of rendering as an expandable and collapsible tree, the menus overlap each other on a single line, making it unusable.

Example (http://media.truerwords.net/outlines/index.html)

xbCollapsibleLists.js file (http://media.truerwords.net/outlines/xbCollapsibleLists.js)

Does anyone know where in this code is causing Safari to become hung up? I'm completely baffled. I have a newer tree script that renders fine in Safari, but for the particular application I'm working on, support for older browsers is crucial and we already have a modification of this code that will work in old versions of Netscape.

I would say rather that the browser detector (ua.js or smth like that) is not apopiate...

Actually I discovered that Safari (and Opera for that matter) doesn't handle absolute position correctly. ::sighs::

I have a hard time believing it's absolute positioning that doesn't work - it works in numerous sites out there. In that css, the only thing I would suspect them to not handle perfectly is clipping. However, I am seriously questioning the xbStyle and browser sniffer scripts. I suspect that's where your problems lie. Remember, Safari didn't even exist when the xbStyle script was last edited, and Opera was severely behind.

I had done alerts to see which sections of the scripts were being called, and everything seemed to be fine. Therefore I ruled out the other extra scripts.

Once I switched all the positions to relative, the menu no longer stayed on one line, it expanded out. But it looked like crap, and the expand/collapse functions also looked bad. So it has to do with the way the absolute positioning is being used in this particular case.