Outfoxed by FireFox

[jwade]

I have a page that I worked hard on and looks great in IE(subjective).
It is a javascript tree with nested table grids that have rounded
corners and a gradient titlebar:

http://www.geocities.com/jesse_wade/TreeGrid/test.html

In Firefox it misbehaves in three ways:
1) The tree looks completely wacky in terms of indenting.
2) The corner images for the table appear to be hidden
3) The javascript for tree expension and collapse doesn't work.

I know number 3 is more appropriate for another group, but I'm keen to
here suggestions for addressing the other two issues...

Thanks!

[kaeli]

In article <11**********************@o13g2000cwo.googlegroups .com>,
jw***@rubytuesday.com enlightened us with...

I have a page that I worked hard on and looks great in IE(subjective).

I don't know about you, but when I pulled it up in IE, first thing that
happened was an error message.
Since I'm a developer, I have the option set in IE to report script errors.
And the menu doesn't work.

MSIE 6.0.28 on Win2K Pro.

Firefox displayed script errors as well.
Open up the javascript console to see them.

--
--
~kaeli~
The definition of a will?... (It's a dead giveaway.)
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[jwade]

Hi Kaeli. Oops! I broke it with an overzealous html editor when
converting to xhtml. I went back to html4 transitional and removed the
CDATA tags and it works again.

I know how to display Javascript errors in Mozilla... I was hoping for
some insights into the first two CSS problems mostly. (Although JS
advice is welcome too)

Thanks. : )

[Safalra]

jwade wrote:

I know how to display Javascript errors in Mozilla... I was hoping for some insights into the first two CSS problems mostly. (Although JS
advice is welcome too)

Well here's some Javascript for collapsible lists/trees that works in
IE, Mozilla and Opera:

http://www.safalra.com/programming/j.../collapse.html

And it degrades nicely if Javascript's turned off.

By the way, please quote the message to which you are replying.

--
Safalra (Stephen Morley)
http://www.safalra.com/hypertext/

[jwade]

Thanks for the reply. I like that your code works. However, I'd
prefer not to use inline event handlers as they add a lot of bulk to
the html with larger trees. (This is for an intranet site with
potentially large query results). I'm certain that the w3c standard
can do vent capturing or event bubbling, I just need to figure out the
latter.

Really, I'll consider the in-list image-tag you're proposing...
Through the purist in me wouldhope for crossbroswer CSS with
list-style-image instead... ;-)

[Safalra]

jwade wrote:

Thanks for the reply. I like that your code works. However, I'd
prefer not to use inline event handlers as they add a lot of bulk to
the html with larger trees. (This is for an intranet site with
potentially large query results).

In that case, I can probably change the code so that you only need an
'id' set on the list element, and it'll do the rest for you. It might
take me a while, so I'll get back to you...

--
Safalra (Stephen Morley)
http://www.safalra.com/programming/javascript/

[jwade]

>In that case, I can probably change the code so that you only need an

'id' set on the list element, and it'll do the rest for you. It might
take me a while, so I'll get back to you...

As long as the code doesn't use getElementsByTagName to scan the doc
for elements to hang event handlers on. That might get slow with a ton
of elements. Event bubbling is key.

Please don't go to too much trouble on my account with the js. It's
the CSS I'm primarily concerned with:
Why are the techniques I've used for layout of the corner images
unsuccessfull?
Why is the indenting so dramatically skewed when moving between
browsers?