problem counting ul elements in firefox for collapsible outline menu

[Elyse Summers]

I'm working on a collapsible outline navigation system for my company's new site and I've got it working fine in IE8, but in Firefox the list and nodes load fully extended. (http://www.ghjohnsontrading.com/elys...rnishings.html) I asked someone for help debugging and we think it's a problem with this area:

function outlineInitOutline(outline)
{
	var kids = outline.childNodes;
	for (var i = 0; (i < kids.length); i++) {
		var kid = kids[i];
		if (kid.nodeName == "LI") {
			outlineInitItem(kid);
		}
	}
}

Not returning the proper number of nodes in Firefox because of the known white-space bug of evil. It's collapsing fine in IE8, Chrome & Safari

(side note: though in Chrome and Safari I have heinous black boxes around my "+" and "-" signs - I think I can fix that by adjusting the line height, any thoughts? It fixed in IE by sticking in a border=0 o.img function in my outline.css file)

but Firefox is refusing to cooperate. I'm new at JavaScript and this is really irritating me, I hope someone can help? Here's a complete list of the files/pages I'm using/drawing from if you'd like to see complete code:

http://www.ghjohnsontrading.com/elysetest/outline.js

http://www.ghjohnsontrading.com/elysetest/furnishings.html

http://www.ghjohnsontrading.com/elysetest/stylesheet01.css

http://www.ghjohnsontrading.com/elysetest/outline.css

I think that should be everything. I hope someone who's better at this than I am can help :)

[gits]

firefox works correct :) - the problem is in furnishings.htm l - where you have invalid (overlapping) markup - it's line 105:

<br></p></font>

has to be:

<br></font></p>

otherwise the childNode collection is not what you think it would be - firefox will give you a font-node as childNode then. so fix the above error and it should work.

btw. it is much preferable to put real layout-directives (like the font-tag in question) into the css file to have a cleaner markup ...

kind regards,
gits

PS: regarding the css issue with the 'black borders' - the image-node would just need to have the background color that you want to have there - just apply a class or whatever to avoid that issue ...

PSPS: i forgot to mention that the visual design of the page looks quite nice - looking forward to see how this will proceed ...

[Elyse Summers]

Thank you so much for your help - isn't it always the little things that slip by you? Having this fixed is such a relief because I can move onto content now - again, thanks! I really appreciate the fix (and the helpful advice.) This is my first time doing a site on this scale using JavaScript, so I'm sure I'll be back with more questions as I continue... and to see if I can be of any help, of course :)

Elyse

[gits]

no problem :) - just post back to the forums anytime you have more questions ...

kind regards,
gits