CSS Menu check?

[Evoir]

Hi,

I am putting together a menu system that runs dynaically from Movable Type. Yup, when you create a new post in MT, it populates the menu. Sweet. I am on a Mac, and am limited to using Virtual PC (non intel mac) and wondered if someone would take a look at this in your browser (specifically looking for feedback on versions of IE and Mozilla but don't mind hearing about other browsers as well).

http://69.5.17.244/

The menu is supposed to be a horizontal drop down menu. But, I see that in IE on my mac, it degrades not so gracefully. :( I know it is not a popular browser (or even available anymore) but I am curious your thoughts about using the menu anyway.

The menu is based on the suckerfish menu from alistapart, and Matt is the one who showed me a demo of it on a site we worked together on. I've modified it, and want to know if it holds up on the PC side.

Browser version/Operating system would be helpful with your feedback.

Thank you!

p.s. I know things are still broken on the site (images). Working on that. I just need to know if I need to work on the menu any longer :)

http://69.5.17.244/

[Matt]

Works in Firefox 1.5.04 and Opera 8.54 but not IE 6.0 for Windows.

Did you include a bit of code called something like hover.htc? It's a bit of JavaScript that fixes a CSS issue in IE.

-Matt

[Evoir]

Hmm. I hadn't forgotten about the js file, I had just named it wrong. Does it work now?

[NoahM]

Still not there in IE 6.

[Randall]

Definitely a no-show in IE6 (Win XP). Looking on the bright side, they do work in IE7...

In both versions, the labels in the menu bar turn greenish when you hover over them. Dunno if that's deliberate or not, but it doesn't happen in Firefox.

The menus are nice and snappy, so if you can get over the IE hurdle it's well worth it. (I need to learn how this stuff works, because I'm tired of javascript menus. Too much code that I can't unravel when I want to change something, and I don't like the time delay before client-side scripts run.)

Randall

[Evoir]

Ahhhh. I think I have it working in IE. :) But, wondering if anyone has an AOL account and can see if my menu is working there? I am told lots of parents have AOL. (not me!)

[Matt]

Evie,

It works in IE, but I'm seeing a JavaScript error:
Line: 13
Char: 4
Error: 'mydiv' is undefined

Could it be that the class 'mydiv' is not used anywhere on the page?

-Matt

[Evoir]

I need to get me one of those fancy new intel macs... it's hard to justify when I have a 6 month old powerbook, but Virtual PC just does not do the trick in this browser-check area. Thanks Matt. :)

Aol Anyone?

[Matt]

Not wanting to interrupt the thread, but why buy a new Mac plus a copy of Windows when you can buy a complete PC system for $500 with Windows?

[Evoir]

Well, I can sell my current mac and get a new one, and be out around $500, depending on which one I sell. Plus, it's a good excuse to get a new mac. :)

But, I'm gonna have to wait a bit longer, anyway. It's really just wishful thinking right now.

Anyone have an AOL account?

[Evoir]

Ok, I created a new AOHell account. And it acts weird... the submenus go UP (and not in a uniform, good way). Not good. Matt, the menu of yours that I am borrowing from works FINE in AOHell.

Can you tell me, in IE do you still get the mydiv error? Again, I looked on your implementation, and you are not using mydiv, either. It looks like you put an empty <div id="mydiv"></div> tag in the footer of your pages. So, that's what I did, too. Hmmmmm.

[Evoir]

Ah, ok. Works good in AoHell now. :) I had moved the submenu down (that was a difference in my menu) but removing that fixed the AOHell thing. So, now I just need to know that the js error is gone. :)

And I need to cancel my free trial of aol. :)

[Randall]

I need to get me one of those fancy new intel macs... it's hard to justify when I have a 6 month old powerbook, but Virtual PC just does not do the trick in this browser-check area. How so? Even in a virtual machine, Windows is still Windows. You should see the same things in IE that any PC user would. (Slowly, perhaps, but I would hope that the dual G5 monster you've got would run it pretty decently.)

Based on the rumors floating around, you might want to wait for Leopard before you get an Intel Mac anyway. Depending on who you listen to, it'll either run Windows XP and OS X at the same time -- or run Windows programs directly in OS X. :eek:

Not to mention, it should have fewer Intel bugs. So, now I just need to know that the js error is gone. I see it here, but it says "Error: 'mydiv1' is undefined," not "mydiv." Does that help? And I need to cancel my free trial of aol. :) The joys of web design. :rasberry:

Randall

[Evoir]

I got virtual PC with XP Home Edition. Maybe that makes a difference. Or it could be the version of IE I am running in Windows... I don't even know how to tell on a Windows machine. It's like a different language.

Yeah, I'm gonna wait. I'm just chomping at the bit...

Now to get rid of mydiv1 error.

[Matt]

Take a look at the original tutorial here: http://www.htmldog.com/articles/suckerfish/dropdowns/

For everyone's benefit, here is the JavaScript code that makes use of mydiv tags:

<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
mydiv.style.visibility = "hidden";
mydiv1.style.visibility = "hidden";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
mydiv.style.visibility = "visible";
mydiv1.style.visibility = "visible";
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

The reason for having this in the first place is that in IE drop-down form fields sit above ALL other elements, irrespective of Z-value. So, the above code actually hides a drop-down item enclosed with the mydiv class when the menu is actively being used (and only in IE). If your form has multiple drop-down fields that might have an overlapping menu, I found that you have to define a new class for these (e.g. mydiv1). Now, let's say that there are no drop-down fields on the page... you have to declare empty mydiv and mydiv1 tags, otherwise you'll get a JavaScript error since IE can't find what it's supposed to hide and unhide.

This is not an elegant solution, but it works and there are no IE JavaScript errors. The only problem is that you have to determine on each page whether to declare empy mydiv and mydiv1 tags (which I do dynamically).

Who said CSS wasn't fun? -Matt

[Evoir]

Matt,

Thanks! I've added an empty mydiv + mydiv1 to the footer of the templates. should work just fine. :) Thanks again for your help.

[Matt]

You could also just remove the lines from the JavaScript code that refer to mydiv and mydiv1 ;)

[Evoir]

Well, then I'd have to deal with testing the menu again. Why did you leave it in there? It seems like you are not using it either.

[Randall]

I got virtual PC with XP Home Edition. Maybe that makes a difference. Or it could be the version of IE I am running in Windows... I don't even know how to tell on a Windows machine. It's like a different language. Shouldn't matter, XP Home vs Pro vs whatever, since it's IE 6 either way. :ytthink:

In Windows programs, the version number is under Help > About <program>. Same as the Mac, only it's at the wrong end of the menu bar. :winky: The reason for having this in the first place is that in IE drop-down form fields sit above ALL other elements, irrespective of Z-value. So, the above code actually hides a drop-down item enclosed with the mydiv class when the menu is actively being used (and only in IE). Good grief -- Netscape 4.x was infamous for doing that to DHTML menus (and I don't think there was a workaround). You'd think they would have been watching for stuff like that...

Randall