Z-Index - Menu behind image in IE, no other browser

[visualizer03]

Hello, so I'm revamping a site and inherited some of the code. I've been working to update it and make all the pages validate and look the same in all browsers - and somehow in the process have messed up my index that once worked...

The main issue is that the navigation menu hides behind the flash div on the homepage in IE for windows. In my attempt to fix this I've now messed up the homepage...but the main gist is that I'm looking to have the navigation be on-top-of everything else on the page.

I tried removing all z-indexes and that did not make it work -so then I've slowly put them back in...I've also worked with relative and absolute positioning. Thank you!

http://tinyurl.com/yh74zrf
Login and password: web

[Eye for Video]

The trick is to correctly use wmode, z-indexing and a declared position.
Here is a link to a past post that covers the topic in detail:
http://www.webdeveloper.com/forum/sh...d.php?t=223938
Download the examples in the zipped file and play with the files.
and here's the example:
http://www.cidigitalmedia.com/tutorials/flash_div.html
Best wishes,
Eye for Video
www.cidigitalmedia.com

[letmehaveago]

from experience, z-index doesn't work as you would expect in ie7 even if you have the correct z-index values.

if you want something on top, the fastest fix is to move it to the very end of the body!

[Eye for Video]

z-index doesn't work as you would expect in ie7

Well I don't know about that, seems to have worked fine for me once I understood how to do it. Remember, z-indexing by itself doesn't work. z-indexing only works for elements that have a declared position.
http://www.w3schools.com/Css/pr_pos_z-index.asp
And even with a declared position that z-indexed element will react differently depending on whether or not it's parent element also has a declared position or not. From an old post:

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.

You can even stack one Flash element on top of another. Here's a page with Flash video player positioned on top of a separate Flash background:
http://www.worldbarefootcenter.com/index.html
As for:

if you want something on top, the fastest fix is to move it to the very end of the body

If that element is still in the natural flow, that would place it at the very end (bottom)of the page wouldn't it?
By "on-top-of" I'm pretty sure the post was talking about a stacking order, not it's vertical position on the page.
Anyway, best wishes all!
Eye for Video
www.cidigitalmedia.com

[visualizer03]

I am still having problems. I am using swfobject to embed flash. Perhaps I'm putting the parameters wrong - syntax incorrect...

I am now getting the menu to appear as the top layer, but the flash is not appearing in IE on windows, but does seem to work on mac browsers. Help.

[Eye for Video]

Can you post a link to the page?
EfV

[visualizer03]

http://tinyurl.com/yh74zrf
Login and password: web

Apparently, I've made it work in IE 7 on Windows, Windows Firefox, and Mac Firefox and Safari, but it is still broken in IE 6 - I don't have access to check other IE browsers. What could I be missing? Thanks

[criterion9]

I find it easier to use swfobject to dynamically embed flash elements rather than statically reassign a flash element to a swfobject element. Swfobject will then handle any weird differences with the browsers without having to accommodate it in the html.

[letmehaveago]

Well I don't know about that, seems to have worked fine for me once I understood how to do it. Remember, z-indexing by itself doesn't work. z-indexing only works for elements that have a declared position.
http://www.w3schools.com/Css/pr_pos_z-index.asp
And even with a declared position that z-indexed element will react differently depending on whether or not it's parent element also has a declared position or not.

It might not have been ie7 it could have been ie6, sorry i can't recall. The problem was it was working correctly in ie8, firefox and chrome but not in one of that mentioned above. thanks for the tip though, i didn't know that.

if you want something on top, the fastest fix is to move it to the very end of the body

If that element is still in the natural flow, that would place it at the very end (bottom)of the page wouldn't it?
By "on-top-of" I'm pretty sure the post was talking about a stacking order, not it's vertical position on the page.

sorry when i say on top, i really mean top of the stacking order and therefore does apply to the post.

[Eye for Video]

if you want something on top, the fastest fix is to move it to the very end of the body
sorry when i say on top, i really mean top of the stacking order and therefore does apply to the post

Well how to get it to the top of the stacking order is the whole point of this thread. The position of a particular <div>'s code in relation to the <body> tag has nothing to do with where it will appear in the stacking order. As in the example page posted above:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code and you will see that the last <div> listed on the page, the one right before the </body> closing tag is the one that's on the very top of stacking list. That's possible because of z-indexing and declared positions.
Best wishes,
Eye for Video
www.cidigitalmedia.com