At my job, we’re rolling out a new website to provide information and access to my hospital’s plethora of patient care applications. I was tasked with creating buttons that open into menus. Easy enough, especially since I used Adobe Fireworks and Dreamweaver. The menus look great in Firefox (no surprise), but in Internet Explorer, a grey border appears on the side. I’ve created screenshots to show you what I mean, viewable here. If you need my code, please reply and I’ll PM it to you, since it’s quite a few lines.
Seems to me there are about a thousand web sites that have menus like those that don’t break. Just grab the menus off one of those and see what they do differently.
Microsoft does things like this routinely. Makes things ‘break’ for competing products, or more precisely (as they claim) they ‘only test with Microsoft products’. If you used Microsoft’s clone of Dreamweaver, I’m sure it would work for IE and break in other ways in Firefox. Not much help as you simply go to 20% broken from 80% broken. It’s still broken.
But if JavaScript was created by Microsoft, then why would the menus be buggy in MSIE? Shouldn’t it be buggy in Firefox? It shouldn’t matter to the parser that the JavaScript code was created using Adobe, right?
JavaScript was created by Netscape, and standardized by ECMA. The MSIE version, called JScript, actually has some subtle incompatibilities with the standard.
Nonetheless, problems with doing things like dynamic menus and whatnot usually come down to differences in the DOM models between browsers, or using non-standard JS methods for DOM manipulation. There’s no guarantee that an Adobe product will output standards-compliant JavaScript – you’ll almost certainly have to tweak it by hand.
Ah, my mistake. I thought JavaScript was created as Microsoft’s answer to Sun’s Java. friedo mentioned tweaking the code, which is what I want to do, but I’m no JavaScript expert. And since this website will be a reflection of my hospital, it needs to look good for all browsers. Can I send the code to someone so they can tell me how to tweak it, or is that asking too much?
Noooooooo. Java has nothing whatsoever to do with JavaScript. They are completely unrelated technologies with almost nothing in common, except for their common syntactic ancestors.
The Netscape product (which they originally called LiveScript) stupdily changed their name to capitalize on Sun’s marketing efforts, back when they thought that sticking Java applets in web browsers was a good idea. Confusion reigns to this day.
As for your menu problem, I strongly recommend pingnak’s suggestion of adapting one of the myriad freeware JS menu libraries. Usually, those are set up so you just have to create some lists and the JS does everything automatically, without the need to tweak it.
One of the great sites for this kind of thing is A List Apart, and here is one example of how to create cross-platform menus using a small bit of JavaScript and CSS.
I am just guessing but you probably need to widen the menu items in CSS. Make the width of the menu items 100%. The black is probably the menu shell div and the lighter color is the actual items.
There’s a difference in the way FE and IE interpret padding and widths.
Does your menu degrade gracefully when a web browser’s Javascript is disabled?
My point in asking is a hospital web site has a high profile when it comes to accessibility. While the federal government’s accessibility requirements (Section 508) do not apply to web sites not maintained with federal tax dollars, be aware your state have have its own version of Section 508 and it may apply to your hospital web site, especially if it’s a public hospital with any kind of taxpayer support. At the same time, the site may be subject to ADA requirements (the target.com accessibility case is the current high profile issue).
There are several menu designs that work with minimal to no Javascript involvement. Some all CSS design work quite well, with a defined hack for IE.
