Topic awaiting preservation: Personal Website (with MSIE qualms :/)

Hey guys... finally got around to working on a personal website: http://www.rpi.edu/~laporj2/

Not complete (still requires a few useability/style things, most especially expand/shrink all; not to mention I havn't filled all the content in yet), but while working on it I've encountered a problem: it breaks MSIE.

Now, it dies gracefully (the only thing not working are the clickable expand/collapses, and since you can see everything anyway, it's not that big of a deal), but I'd like to see if I could find a cross-browser solution for the clickable menu I have going on.

It's pretty simple (just a bunch of nested ul's), and if an LI is followed by a UL, clicking the LI will cause the UL to expand and contract. The code is in the page, and is pretty short. The part I think is killing MSIE is the window.onload part. I'm not using anything too complex, other than element.nextSibling, so I am not really all that sure what's going on. :/

Any help would be appreciated.

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

For the menu, you should try to loop through the direct children of the nodes, instead of doing a hard guess like you do in nextUL( ), to make sure the browsers do NOT insert some TEXT elements between the HTML elements.

As for the site itself, well it's minimalist but I like the pictures and scripts.



(Edited by poi on 04-11-2005 21:21)

quote:

---

poi said:

For the menu, you should try to loop through the direct children of the nodes, instead of doing a hard guess like you do in nextUL( ), to make sure the browsers do NOT insert some TEXT elements between the HTML elements.

---

You're right; it's fixed now. Still doesn't work with MSIE, heh, need to figure this one out...
first.

EDIT: It seems that MSIE doesn't see a UL as a child of another UL.

As for being minimalist, it's going to have a bit of additional style and content later on, but I want to get it working all the way first... so patience.

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

(Edited by Iron Wallaby on 04-11-2005 22:53)

(Edited by Iron Wallaby on 04-11-2005 22:55)

Looks nice, it would be good if the menu was cookied (i.e which menus are opened or closed). Or if you loaded the page dynamically into the center of the design. Also, the font doesnt suit the text you have in blue for some reason.

Ok, updated with some style this time.

Hugh: Excellent suggestion concerning the cookies. It's in now. I also added two little doors: they will open all tabs and close all tabs respectively. I hope they are useful.

And, in case any of you were wondering what I looked like, there you go.

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

(Edited by Iron Wallaby on 04-13-2005 09:03)

Nice style.

The two icons on the right rather funny. La porte ( the door, in French ) is either closed or open. Is this game of word made on purpose ?
I can't wait to see more content.



(Edited by poi on 04-13-2005 21:06)

quote:

---

poi said:

The two icons on the right rather funny. La porte ( the door, in French
) is either closed or open. Is this game of word made on purpose ?

---

Indeed. I needed something that could be opened/closed, expanded/contracted, etc., and decided upon a door because of my name. Though alas, I speak no French, my name is all I know. ;p

Glad somebody noticed, hehe.

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

Well, it's now cross-browser (by this I mean it works in at least MSIE, FF, and Opera, and hopefully Safari/Konqueror) - though the open/close all and the cookies saving isn't back in yet. A few things to note, that others might find handy:

• ul's cannot be within ul's. In fact, only li's seem to be allowed inside ul's. I suppose that makes sense.
• MSIE doesn't like reading values like className. It much prefers reading/writing to an array, which works fine by me as well.
• Closures are your friend.
• I have been thinking lately that all major browsers are pretty consistant with CSS lately. Boy was I wrong. I had to do quite a bit to get this simple-looking page to render identically in MSIE, FF, and Opera (and hopefully Safari, but I can't check that until tomorrow). Last time, I gave in and used extra div's that had no structural meaning. This time around, I only use necessary markup, and everything stylistically is done in CSS, which makes me quite happy.
• MSIE doesn't like :hover pseudoclasses. I didn't know this. One more thing to fix via Javascript... ;p
• This hierarchical structure is a fantastic way to keep people from getting a sensory overload from an obscene amount of data, since this site (even though I havn't uploaded all content yet) is pretty full.

The new code is pretty short and clean (much moreso than the last two which used all sorts of DOM insanity to work), of which I am happy.

var db = [];



window.onload = function () {

	var elems = document.getElementsByTagName("span"), next;



	for(var i in elems)

		if(next = nextElement(elems[i]))

			if(next.tagName == "UL")

				(elems[i].onclick = toggle(elems[i]))();

}



function nextElement (node) {

	try { do node = node.nextSibling; while(node.nodeType != 1); return node; }

	catch (error) { return false; } // return false if we run out of siblings

}



function toggle (element) {

	return function() {

		element.className = db[element.innerHTML] ? "open" : "closed";

		nextElement(element).style.display = (db[element.innerHTML] = !db[element.innerHTML]) ? "none" : "block";

	}

}

---
Website

Congratulations on getting your site up and running smoothly, I've just a few comments on your last post...

quote:

---

* ul's cannot be within ul's. In fact, only li's seem to be allowed inside ul's. I suppose that makes sense.
* MSIE doesn't like :hover pseudoclasses. I didn't know this. One more thing to fix via Javascript...

---

You're right of course with the first point, however don't take it literally, you can have a ul inside a li which is inside a ul, you may have realised this but I just thought I'd make it clearer, the second unordered list is considered another list item inside the original one.

Secondly, as you found out, IE doesn't like the hover pseudo class. Infact it only applys it to links, where as the w3c doesn't specify that this should be the case, so most other browsers will allow the hover pseudo class to be used for most elements such as divs and spans. you can find more on this at the W3C.

Cheers,