css menu test (in various browsers)

[BroChris]

http://www.chrisandabby.com/pulse/5/index2.html

On that page, the pulldown menu at the top works for me (in ie 5.5), but a couple people have told me that it doesn't work for them (in ie 5.0 and aol 8.0). I use an iframe, and the menu doesn't seem to go on top of the iframe for those people.

Could you check it and tell me what browser you have? Also, is there just some code that will allow it to go on top of the iframe for everyone?

[Bosko]

That menu doesn't work at all in Mozilla (1.3a).All I get as corny rollover.

[redhead]

they work fine for me: win 2000 / ie6

i dont think they are corny (but hey, thats only my opinion), and you did a good job of make green look good. ;)

[jalarie]

Win2000, Netscape 4.80:
The labels start off as 'ministries,' 'events,' 'discipleship,' 'parents,' 'leaders,' 'links,' 'pulse gear,' and 'contact us,' plus an extra 'ministries' link hanging slightly upper-left. When I mouse-over a link, the one on its left switches to a lighter color and takes on the name that I have the mouse on. When I move off, the color switches back, but the name remains incorrect. I get multiple JS errors:

 JavaScript Error:  http://www.chrisandabby.com/pulse/5/index2.html,
 line 15:
  obj has no properties.

[MCookie]

IE 5.1.6 Mac.
Looks good, no JS errors, but the drop downs go behind your IFrame...

[BroChris]

That's exactly the problem that I originally had with some people, MCookie. Any idea how to fix this? Would a simple z-index="-1" for the iframe do the trick?

[brothercake]

I think Iframes are window objects in mac/ie5 - ie they have a z-index of infinity and nothing can go above them

Nice menus though :)

[BroChris]

I think what I want to do is just disable the sub menu effect in browsers that don't support it (and in ones that put it behind the iframe). Do you know an easy way of doing this, or do I have to re-write the whole effect with this in mind?

[MCookie]

Instead of disabling submenus - how are some of us supposed to navigate when you do that? - what about not using an Iframe?

[BroChris]

Well, I thought I would do that because the sub pages can still be accessed by clicking on the main link, then the list of sub pages load in the iframe. I could switch to completely frames, but I'd still have the same problem. My client wanted to have a navication scheme like that which would not reload every time you click a link.

Is there a better option?

[brothercake]

If you have to have the iframe, then selective degrading of the kind you mean is probably best; you just have to make sure that all the site areas which are linked to in the menu are also accessible without it.

AFAIK, the only browser in which layers can go above iframes is IE6. You could discriminate for ie6 only without using javascript by using IE's conditional comments:

<!--[if IE 6]>
<style type="text/css" media="screen">

... menu css

</style>
<![endif]-->

[MCookie]

Well in case of not using any sort frame; after loading the page once, the images are in the browsers cache and the menu really is not that much code. I mean, I've seen JS menus of 27 K. And that's without images...
You could make it faster loading by using very short class names, ie "mre" instead of "menurelative", short image names; "pu-on.gif" instead of "pulsegear-on.gif", put image sizes in a stylesheet (if they were the same size...), optimise the large image above the menu.
Maybe it takes a few seconds longer to load, but it looks better without disabling half of your nav.
And really, if people are interested, they will wait the two extra seconds.

[BroChris]

Thanks for all of your input. I decided to go with the IE 6 only method, even though I really wanted to do otherwise. I myself use IE 5.5, and know that it is still a largely used browser. They can still access the submenu pages by clicking on the main link, so the site is accessible to all (plus, doing it the IE 6 only method allows N 4.x users to use the site, while it was previously very messed up).

One final attempt: is it possible to detect a visitor's browser version passed the decimal? Then I could load the submenu for IE 5.5, but when I tried this, it would not. Any ideas?

[brothercake]

you can look for "MSIE 5.5" in the user-agent string; or you could use navigator.appVersion (i think!)

There's probably object detection methods as well - any object which is supported in ie5.5 but not ie5.0 would do it

[cg9com]

window.createPopup
is ie5.5+ i believe