Dropdowns appearing under Flash and form elements

[patrickfulton]

Dear Sitepoint JS wizards:

There has to be a solution to this problem. My company is currently doing a semi-redesign of our site. Our current navigation uses dropdowns (namely, the Suckerfish method) and it will not be changing, but it does, however, need to improve.

Here's the issue: in every single dropdown menu coding method that I've seen on the Web, the dropdowns get positioned underneath Flash content and form elements in IE 6 (and sometimes in Opera). A majority of our audience uses IE, so simply suggesting another browser is not a solution. We also have specific advertising positions that we need to adhere to, which is where the problem really comes into play (a Flash ad appears under the navigation and bam, half of the dropdown disappears when the user is trying to get through the site).

We used a "band-aid" approach to help with the problem...unfortunately the fix only works some of the time. This is the method we used:

http://homepage.mac.com/igstudio/des...ls-iframe.html

It works pretty well for the form elements, but it's no good on Flash. It also causes a bit of flickering in Opera, as well.

I just e-mailed the guy(s) in charge of the UDM 4 site (http://www.udm4.com/menu/) to see if UDM gets around this issue. I'll let you all know what I find out.

Until then, does anyone with more JS experience with me know a workaround/fix for this? Have you folks had this problem before? What did you do, aside from repositioning things in your layout to stay away from the nav?

Thanks!

[patrickfulton]

Here's a bit more on the subject from the guy who originally wrote the fix that we used as our band-aid:

http://tanny.ica.com/ica/tko/tkoblog...-in-ie-part-ii

I tried the code he has on this updated version, however, the dropdowns still appear underneath Flash elements.

[Pepejeria]

Are you using wmode transparent on the flash?

[patrickfulton]

I'm not sure if the banners are using it or not. Unfortunately, (to throw another wildcard in here) the banners are served from outside companies - such as Tribal Fusion.

[Pepejeria]

Well, u could always add this property using the DOM I guess...

[patrickfulton]

Top. Anyone else have any thoughts/suggestions?

[Pepejeria]

Again, you can once the document is loaded check for all flashs and add wmode transparent to them using the DOM

[patrickfulton]

Since I have very limited knowledge of the DOM, anyone care to help me out? How would I go about detecting Flash banners on the page and applying wmode to them?

[Pepejeria]

First start by reading a bit about the DOM, then lookup getElementsByTagName. This will return you a collection that you need to iterate. In the iteration you will need to set the wmode attribute with setAttribute.

Though it can get a bit tricky if the Flashs are inside Iframes