21 Nice, but...no IE5/Mac

Nice tutorial, but this doesn’t work at all in IE5/Mac. All you get is the background photo…no navigation at all. (Not that I use IE5/Mac, but I do test for it always, as many people still use it.)

I know it can be done (CSS menus) to work in IE5/Mac. Just have a look at Project 7’s Pop Menu Magic and see for yourself:

http://www.projectseven.com/products/menusystems/pmm/

Perhaps their technique can be deconstructed sometime. It seems to work in all modern browsers, IE 5 and newer (including Mac), and even degrades nicely in really old browsers (4.x and older.)

posted at 01:26 pm on March 30, 2005 by Tony

22 Are dropdowns still the hit?

Every site I go to now, not many of them have dropdown menus, or anything that’s dynamic (made with css or javascript or flash). The only one that’s pretty good is the one on macromedia.com, which is in Flash. Sometimes css/javascript dropdown menus can be a hassel, especially when the submenus aren’t positioned automatically.

posted at 02:18 pm on March 30, 2005 by Oliver

23 using something very similar

I’ve been using a very similar technique for the main navigation on my employer’s site:

http://www.clunet.edu

It even works on Mac IE 5!

posted at 02:23 pm on March 30, 2005 by Justin

24 Thanks for the comments so far!

To start: I recognize the irony that this is not implemented on my site; I never could figure out if it is a Safari bug or my own error, and I haven’t had the time to re-address the problem. It is a completely different subnav, however, and was done 8 months before this article was conceived.

BROWSER SUPPORT

As far as browser support; there could be a number of ways to get this to work in the obscure older browsers like N6 and IE5/Mac. I stopped at the common browsers, and as someone caught, I have a padding bug in IE that I never fixed. I think it’s as simple as a *selector to specify the padding for IE, but I haven’t tried it yet. I simply don’t support N6 and IE5/Mac anymore. If someone’s still using N6, they really owe it to themselves to upgrade, and most Mac users on new-ish machines are browsing with Safari rather than IE. Even Microsoft doesn’t fully support IE5/Mac anymore. And Opera 8? That’s gotta be a bug, I don’t know why it would be collapsing all the tabs. I’ll test again when it gets beyond beta…

RESIZING

As far as resizing; the point is taken, and sliding doors could be a good technique to use here. I was going for a simple example, and my live implementation (which prompted this article) of this technique does not allow resizing. Since I was using Gill Sans on nepostrategies.com, it had to be an image and I couldn’t use sliding door navigation. However, at least in Safari, going up and down two text sizes still has the subnav text within the blue horizontal bar and doesn’t break anything too much aesthetically.

SIDEBAR?

And Paul, a top menu with sidebar would be a great next step, and solve a VERY common nav issue. Of course, it wouldn’t be as much hover magic as a positioning system. It would have to be an absolutely positioned child ul, and I’ve thought about it in the past. I’ll have to try something on my next project.

I appreciate all the feedback!

posted at 02:36 pm on March 30, 2005 by Eric Shepherd

25 Where you will find older browsers

Just as an aside: the reason I still test for IE5/Mac is because I work for a school district. Darn near every Mac in every lab in every school here uses IE5. Sure, there are some newer machines floating around, but most are really old (budget issues.) I think you’ll find that in most K-12 schools (not counting private schools, or public schools in super rich neighborhoods), you’ll get a pretty high percentage of IE5 (or older.)

I sometimes teach summer (or after school) workshops in web design, and I like to point the students at well designed sites. It’s a shame when a site I find doesn’t work (at all) when the students try to visit. (Although, I must say, it does provide a perfect segue into designing with web standards, and making sure your site degrades gracefully for crappy browsers.)

So, if students surfing the web or teachers looking for something educational are nowhere near your target market, that’s fine. Otherwise, it’s probably best to make sure any design implementation at least degrades gracefully. It doesn’t have to work (like it does in modern browsers), but it should still be useable (even if, in this case, it only provided the parent links or even just an unstyled list.)

posted at 04:39 pm on March 30, 2005 by Tony

26 RE: Flash Level/Layer Control

If you put the flash object and embed tags all within a container div, you can adjust the z-index of the div, thereby affecting the Flash movie’s stack order.

Haven’t really tested this much beyond IE6 and FireFox, though I can say it works quite nicely in both.

posted at 06:36 pm on March 30, 2005 by Michael

27 IE bugs

It’s a real nice article, congrats. It works the example works perfectly in firefox, but i tried it in Internet Explorer (6.0.2800) and, deception, some major glitches appeared.. the mouseover event (on any links in the menu) makes the selected tab “flashes” .. i noticed that the also nice “suckerfish” menu triggers this bug .. wich, strangely no one noticed.. So i decided to try it on my laptop, wich is running the same xp version BUT with Internet Explorer (6.0.2800) .. no glitch. That’s exacly the kind of things that makes us love ie. F****** IE.. I’ve said it.

posted at 07:22 pm on March 30, 2005 by h3

28 Mistake

My laptop runs Internet Explorer (6.0.2900).
Sorry, my mistake :p

posted at 07:23 pm on March 30, 2005 by h3

29 Ah! 6.0.2800! I should have known...

Argh. I only have one each of 5.0, 5.5, and 6 to test on. So, for the listening audience, is there definately a problem in a version of IE that isn’t just the page-refresh-every-time thing?

I don’t have a problem in my version of IE, which happens to be 6.0.2800, but it is on a Win2K system, not XP.

posted at 08:25 pm on March 30, 2005 by Eric Shepherd

30 position:absolute; screws it up...?

Maybe I am very confused, but I think I have a problem with this (more likely, i am making a really dumb/obvious mistake). I have a #container div that contains the entire site and so that it can be centered. that container is set to position:absolute;. When you put an absolute object (like this menu) into another absolute object (the container), doesn’t the container close to accomodate the menu?

on another note, i don’t understand why anyone lucky enough to have a mac would use ie! there are so many other good browsers for macs, even the teachers at schools (prob. old and grew up using typewriters and punch cards) should learn to not use ie…

posted at 10:00 pm on March 30, 2005 by R6MaY89