Going cross-platform

This revision of the script & style is rather small (hence the small version increment) but it adds important compatibility with Mac browsers. I’ve tested it on Mac OS 10.3, in Safari 1.1, IE 5.2.3, Firebird and Camino 0.7, Opera 6.03 and OmniWeb 4.5. Also tested on IE 5.1.7 on Mac OS 9 but very lightly as it appears that that one has identical behavior to 5.2.3. If you find differences, please let me know.

CSS is slightly changed, and simplified in a way; more like streamlined, free from unneccesary style rules. I also returned WinXP style example – it needed change in IE-related script to work properly. Fixing this has side effect that item icons can be used again.

I provided download links for each example menu style, so you can play around and reuse them.

Script changes

Mac testing revealed some not very pleasant things. Safari had problem with the main style rule, repeated here (for full style review, checkout previous post):

#menu {
	position: relative;
	z-index: 10000;
}

In some cases it wrongly reports the distance from viewport top to the menu as document.clientHeight(?!), which then screws up the check for off-screen placement. Since that style rule is only needed for IE/Win, I added * html in front of it and now it works OK for IE and not causing problems for any other browser. To be sure that Safari does not break ever, I added this line of code to positioning part of the script:

if (ADXM_ua.indexOf("safari") != -1) return;

OmniWeb uses the same engine as Safari (KHTML), but it has more problems – it reports item width as 0. :( To my surprise, Camino is doing the same (while Mac Firebird works great). So, similar lines as the one above are added at the begining of ADXM_SetMenuPos() function.

As you can see, I have returned the XP Luna style to the list of examples. To achieve the effect, I need li:hover. Since IE/Win doesn’t support that, I added this to the script:

oMenuLI.onmouseover = function() {
	this.className = "over";
};
oMenuLI.onmouseout = function() {
	this.className = "";
};

Suckerfish drop-downs use the same stuff – class change is a very powerfull tool. It’s not very standard-oriented, but since we are using it simply to simulate standard behavior, it can pass.

Now you simply need to style li.over identically as li:hover and you’re all set.

Style changes

I have reworked the styles for Basic, Minitabs and WinXP example. They are now as simple as possible. Important change is the addition of this:

#menu li ul li:hover > ul {
	left: 30px;
}

Because JS positioning is turned off in some cases, that means that submenus are placed right below parent item. In the vertical menu, that means that submenu will cover remaining items in the parent menu. This rule makes sure that submenu leaves some room, so user can select lower parent menu items. As one of the example shows, this rule has no effect in Camino 0.7. I figure this is a bug, so I’ll leave it be.

And there’s also Opera 6. Whether on Mac or Windows, horizontal menu with width:auto is going veeery wide. So this ugly bit of style rules is needed to fix that:

/* Fix for Opera 6 */
html>body #menu li { width: 67px; }
/* undo for CSS2-compliant browsers */
head:first-child+body #menu li { width: auto; }

It gets worse in some cases, like in WinXP example where I needed to fix the submenu width (and widths of its LI elements). But, that’s the price of backward-compatibility. Personally, I would prefer to simply ditch Opera 6 support; unfortunatelly that involves server-side detection.

Yipi

OK, that’s it. All that’s left to do now is follow browser changes and fix what ever gets broken. I believe that bad times are behind us, and that future browsers will offer much better CSS2 support.

Update

Small update for better browser support. After tests with Netscape 7.1 and PocketPC 2003 IE, I realized they don’t support menu re-positioning functions as well, so I added exit lines for them too. (Dec 10, 2003)

Tags or categories or topics...

Lots of ramblings on this blog...might be easier for you to find your juice through these tags:

Voices from the crowd, 10 so far

The basic menu fails with a script error in Windows with IE 5.01, 5.5 and 6.0.

The simplebits Categories menu cannot be hovered on with Firebird, Mozilla 1.5, IE 5.01 and 5.5. Well, it hovers sometimes, most of the time it disapears when you try to hover over it. Also in Mozilla and Firebird the hover seems to be very slow. The bar on the left takes a long time to appear.

The Stan James menu works with Firebird, Mozilla 1.5 and IE 6.0. With IE 5.01 everything looks fine and the top menu works great. When you hover over the menu that starts with “Introduction” the menu item drops down to the paragraph starting with “Our rules”. With IE 5.5 the top menu takes a very long time to fire the hover event. At first I thought it didn’t work, but discovered if I waited long enough, it would finally appear.

by Tanny O'Haley
1937 years, 5 months after the post

Tanny, thanks for the comment and testing. I fixed the basic example (real blunder: I typed the wrong path to the menu script file).

As for minitabs, I had that problem while developing, but at some point managed to overcome. At least I thought I did. I can’t repeat it in Firebird, but I manage to do so in IE 5.5, sometimes. It’s simply that browser sometimes fires Blur event before Hover on the next item and thus it all disappears (depends on how quickly you move the mouse). It simply needs a bit of work on the CSS, but no time at this moment to polish it.

SJ: IE5.0, yes, I know (see the text at page example), and I hope anyone can tell me the possible reason so I know what to look for.
IE 5.5 is slow, for the reason I can’t really pinpoint. It happens only with that menu; it’s not because of the Flash file, as it works the same when I remove it; vertical menu using the same script on that same page works as fast as any other…Real puzzle. It might be some left-over code (example is stripped-down version of the real web site), but I can’t be sure. Since it does not happen with any other example, I left it be until I had more spare time.

by aleck
1937 years, 5 months after the post

Greetings!

Has the script error been fixed in the basic zip file? I’m still getting a script error. I’ll do some more investigation…

by Marlin
1937 years, 5 months after the post

Marlin, maybe you have it cached and your browser won’t reload it from server. I just checked again and it works as expected.

Try with cleared cache.

On another issue, I have to see why are all names in the comments in lowercase — I probably messed something up in MT.

by Aleksandar Vacic
1937 years, 5 months after the post

I don’t know if this will fix the IE 5.01 problem but I was having a problem with IE 5.01 not seeing rules in the CSS. I think there is a problem with using IDs for the CSS rules with IE 5.01. I solved my problem with creating an empty rule just before the rule I wanted.

#nav ul li {}
#nav ul li { margin-left: 2em; }

Without the first rule IE 5.01 did not see the second rule. I really haven’t looked at it so I’m not sure if this is the problem. It’s just a thought.

I’ve been looking at your menu in IE5.2.3/Mac OSX 10.3 and it doesn’t seem to work, or even degrade nicely. It doesn’t matter if it’s the full css version or the script version, neither works.

by Ron Derksen
1937 years, 5 months after the post

Version 1? It should work in IE5/Mac.

Version2? It does not work in IE5/Mac. Only in browsers capable of working with li:hover.

by Aleksandar
1937 years, 5 months after the post

How to degrade IE 6.0 to 5.5
My Opreating system : Windows 2000 service pack 4

by ashok
1937 years, 5 months after the post

No way that I know. You can always try with separate installs, explained on http://www.insert-title.com/web_design/?page=articles/dev/multi_IE

It gives good enough results, although I still test in clean install using VMWare.

It’s a pain, and I don’t recall exactly how, but it’s doable. Google is your friend. If you have installed a service pack, it is no longer in the “Add Remove Programs List” There is a command line way to do it though.

BUT, even better than that, as mentionedm just run multiple installs of IE. Keep your core IE at the most updated 6 and run 5.01 and 5.5 as stand-alone.

by Tim Connor
1937 years, 5 months after the post

Going cross-platform

Script changes

Style changes

Yipi

Update

Voices from the crowd, 10 so far

Post your opinion

Related posts (possibly)

Here they come…

Searching for perfect mail client…

Project Gutenberg

Text eligibility testing

How are Hulu, Amazon, iTunes and others actively stopping me to give them money

WCH 2.5 — IE 5.0 support">WCH 2.5 — IE 5.0 support

Tags or categories or topics...