Submenu overlap on Safari 2, Mac OS X in table-based menu

[jvincent]

Good day.

I am a corporate customer and we use the Milonic menu on our company Intranet. Almost everyone at our company is on a PC except for a small group who uses Macs.

We our redesigning our intranet and in the process of testing the site for the upcoming re-launch we saw that the Milonic menu has a problem on Macs.

The new design uses the Table Based (Relative) menu. After spending time playing around with different variables, CSS, and suggested fixes from this forum, I decided to first see how the table-based menu looked on our Macs "out of the box" so to speak.

Well, the problem is there on the standard template without any modifications. Here's an overview:

- Downloaded and unzipped Table Based (Relative) menu. "menu_sample9_ver5_777.zip".
- Everything is fine for IE on Windows.
- Everything is fine for FireFox on a Mac.
- On Mac OS X 10.4.8, Safari version 2.0.4 there is a problem with the first-level submenus overlapping the Main Menu buttons/links.

Since I am supporting a company Intranet I am not able to load the example somewhere for you to see it. It is the standard table-based menu without any changes on Safari, so I am hoping one of the forum Mods or maybe another customer has faced this issue before on Safari 2 / Mac OS X.

Any help would be greatly appreciated. The Milonic menu is fantastic by the way!

[jvincent]

Okay, I realized my comment about not being able to post the code is silly because there's a working example of the table-based layout on the Milonic site. When I view that page with Safari 2 on a Mac (OSX), the problem does not occur. This is the page with a screen capture:

http://milonic.com/menusample9.php


http://farm2.static.flickr.com/1175/919 ... 27.jpg?v=0

However, when I download the latest table-based menu code and put it on our web server, it looks like this when viewed with Safari 2 on a Mac (OSX):

http://farm2.static.flickr.com/1049/919 ... e2.jpg?v=0

This is the version I downloaded:

http://milonic.com/downloads/menu/e ... r5_777.zip

Thanks.

[jvincent]

Here is a solution that worked for us.

Even though we are using a Relative menu inside a table, I realized that a solution was to set the submenu postion with an absolute value inside menu_data.js (I just kept experimenting until finding the right number of pixels).

Code: Select all

topSubOffset = 44; //Fixes submenu overlap on Safari

Using this approach, the submenus were correctly placed on Windows IE, plus both Safari and Firefox on the Mac. This solution did cause the menus to be misplaced on IE for the Mac (which some people still have on their Macs here), but that could be addressed with an If statement:

Code: Select all

if(mac) {
topSubOffset = 50;  //Fixes submenu for IE on Macs
}

For a corporate Intranet where we could test all the supported browsers and platforms, this solution was acceptable. For an Internet site, it would be less ideal becasue there are so many more browsers and platforms to be accounted for.

This 'bug' for table-based relative menus on Safari still needs to be addressed. It is a bug in your out-of-the-box code.