Drop down menus appears behind flash in ie

[prt20]

I don't know if this has been asked before, if so could you please send me the link cause searching for it and i can't see anything.

We have a drop down navigational manu at the top of the page and underneath it various flash videos, but in Internet Explorer, ie6,ie7,ie8, the menus appear behind the flash videos.

We had the same problem in firefox but were able to add the flash var wmode=transparent, which fixed the problem....

We also can't use z-index cause the item is not absolutely positioned.

Any ideas.

[Eye for Video]

Well you're on the right track. You need to give the Flash a wmode to get it in the normal flow of the page. But if you want to stack one element on top of another, you'll need to use a declared position (not neccessarily absolute)and z-indexing. Just remember that how that positioning reacts depends on whether or not the parent element also has a declared position. So using a combination of the two (wmode and z-indexing) will get things working for you.
From past posts:
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
and
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
http://www.w3schools.com/Css/pr_pos_z-index.asp
Also discussed here:
http://www.webdeveloper.com/forum/showthread.php?t=130334
Best wishes,
Eye for Video
www.cidigitalmedia.com

[prt20]

Hi thanks for the response.

In my haste i seemed to have explained the issue incorrectly.

we can not use the wmode flash value in firefox as it will not load the video at all when this is used. If wmode is used in the ie browsers it works fine.

But im happy to hear im on the right track, this has been a real problem for ages.

Do you maybe have an example of this working so i can test it, that would be so helpful....

[Eye for Video]

If you are having problems with "wmode flash value in firefox" then how you are coding that value is the problem, not the use of wmode. It works just fine in FF.
Here is a sample html page with 3 layers, 2 html and one flash. By changing the z-index and position you can have Flash behind, on top or between the 2 layers of html
http://www.cidigitalmedia.com/tutorials/flash_div.html
See attached file for html, .swf, and swfobject
Play around with different positions and z-indexing.
If you still have problems, post a link to the page.
Best wishes,
EfV

[prt20]

thanks so much for that example, i'll give it a go and see if i can apply it to my page. Thanks again