Hello,
Some background: I am redesigning a public-facing website and in doing so with the goal of XHTML compliant, clean, .CSS-based, accessible code. Part of the code will be the implementation of a .CSS based global drop down menu system. The code I am writing dynamically creates a nested <ul>. The code is modeled closely after this code I have found:
I have been attempting an implementation of the code, but in use "over" a div that contains Flash. The Flash is part of the eventual home page design and must remain.
Everything is great in Windows, but there is a weird behavior I am experiencing in Macintosh environment.
I have on my personal website a very simple implementation of the basic code, with little change from the original example, exception being the Flash.
Here is the page:
This page (menu and Flash) renders 100% perfectly in all Windows browsers I have tried - IE, Mozilla, Netscape, etc.
However, I have experienced the following on the Mac (OSX):
(A preliminary note - I tried this with Flash movies published from MX and 8 for Flash 7 and 8 Player and it does not seem to make any difference what version of Flash, same results...)
Safari - The menu works well, except for a weird behavior where the menu will "flicker" back and forth with the elements of the Flash movie - elements being an important distinction because it doesn't happen with the movie itself...in my example the menu only flickers when the tweening shape is underneath it. Other than this weird behavior, everything is perfect..
.
Firefox Mozilla - the menu works 100% in Mozilla on Mac, at least on the version I have tested it on and it's a latest version I think.
Netscape - perhaps the most discouraging and weird behavior was in Netscape, where the menu really doesn't work over the Flash; here, the sub menu's just don't appear at all.
I have found in research that this is not an isolated problem, and has been reported with not only .CSS based menus but some canned javascript menus...
I have also read about the Flash Satay method ( but I have no idea if something like this will solve the problem.
Now, I have done a few additional experiements:
I tried I removing the positioning from the #Flash & #menu divs...but doing this doesn't have any effect... I don't have an example posted but it had no effect on either Safari or Netscape Mac...
I tried wrappping the floating menu in an extra div and positioning and z-index the extra div...but doing this doesn't have any effect... I don't have an example posted but it had no effect on either Safari or Netscape Mac...
I tried putting the flash first in the HTML source, and the menu after it then margin the flash div at the top and position the menu absolutely (no z-indexes required) to the top of the page...
This was interesting. It solved the problem with Mac Netscape hiding - or making unselectable - the menu bar... however it did NOTsolve the problem with the flickering in Safari... I have a few examples of this code here...
So, it seems the absolute positioning does help in some aspect, but still has no effect on the "flicker" problem...
have also found this interesting --
Now, while this isn't the same as the code I am trying to implement, it is interesting. This example however produces the following effect - in Safari Mac - it renders the "hidden" submenu div unselectable, in other words, the same problem I was having with our code in Netscape mac occurs in Safari with this code, but not in Netscape where it works fine! ... But I am wondering if there is some nugget of a solution in what is going on here...
Folks, I have tried many things and for many hours but nothing seems to work, and although I am dead-set on using
a <ul> based, accessible, .CSS menu, I am really at my wits end, with trying to get it to work appropriately in those 2 browsers over the Flash elements
I really, truly appreciate any insight you might have into this dilemma. It is driving me insane.
RR
Some background: I am redesigning a public-facing website and in doing so with the goal of XHTML compliant, clean, .CSS-based, accessible code. Part of the code will be the implementation of a .CSS based global drop down menu system. The code I am writing dynamically creates a nested <ul>. The code is modeled closely after this code I have found:
I have been attempting an implementation of the code, but in use "over" a div that contains Flash. The Flash is part of the eventual home page design and must remain.
Everything is great in Windows, but there is a weird behavior I am experiencing in Macintosh environment.
I have on my personal website a very simple implementation of the basic code, with little change from the original example, exception being the Flash.
Here is the page:
This page (menu and Flash) renders 100% perfectly in all Windows browsers I have tried - IE, Mozilla, Netscape, etc.
However, I have experienced the following on the Mac (OSX):
(A preliminary note - I tried this with Flash movies published from MX and 8 for Flash 7 and 8 Player and it does not seem to make any difference what version of Flash, same results...)
Safari - The menu works well, except for a weird behavior where the menu will "flicker" back and forth with the elements of the Flash movie - elements being an important distinction because it doesn't happen with the movie itself...in my example the menu only flickers when the tweening shape is underneath it. Other than this weird behavior, everything is perfect..
.
Firefox Mozilla - the menu works 100% in Mozilla on Mac, at least on the version I have tested it on and it's a latest version I think.
Netscape - perhaps the most discouraging and weird behavior was in Netscape, where the menu really doesn't work over the Flash; here, the sub menu's just don't appear at all.
I have found in research that this is not an isolated problem, and has been reported with not only .CSS based menus but some canned javascript menus...
I have also read about the Flash Satay method ( but I have no idea if something like this will solve the problem.
Now, I have done a few additional experiements:
I tried I removing the positioning from the #Flash & #menu divs...but doing this doesn't have any effect... I don't have an example posted but it had no effect on either Safari or Netscape Mac...
I tried wrappping the floating menu in an extra div and positioning and z-index the extra div...but doing this doesn't have any effect... I don't have an example posted but it had no effect on either Safari or Netscape Mac...
I tried putting the flash first in the HTML source, and the menu after it then margin the flash div at the top and position the menu absolutely (no z-indexes required) to the top of the page...
This was interesting. It solved the problem with Mac Netscape hiding - or making unselectable - the menu bar... however it did NOTsolve the problem with the flickering in Safari... I have a few examples of this code here...
So, it seems the absolute positioning does help in some aspect, but still has no effect on the "flicker" problem...
have also found this interesting --
Now, while this isn't the same as the code I am trying to implement, it is interesting. This example however produces the following effect - in Safari Mac - it renders the "hidden" submenu div unselectable, in other words, the same problem I was having with our code in Netscape mac occurs in Safari with this code, but not in Netscape where it works fine! ... But I am wondering if there is some nugget of a solution in what is going on here...
Folks, I have tried many things and for many hours but nothing seems to work, and although I am dead-set on using
a <ul> based, accessible, .CSS menu, I am really at my wits end, with trying to get it to work appropriately in those 2 browsers over the Flash elements
I really, truly appreciate any insight you might have into this dilemma. It is driving me insane.
RR