DIVS over flash movies in Internet Explorer

Question

The age old question... why the hell doesn't a div positioned over a flash object stay on top with z-index. I have found the answer in the past, but it's been so long, I can't seem to get it. My flash movie is in a div floating left:

<div id="flash">
<object width="614" height="289">
<param name="movie" value="images/75.swf">
<param name="wmode" value="transparent">
<embed src="images/75.swf" width="614" height="289" wmode"transparent">
</embed>
</object>
</div>

My css for the div that needs to be on top is:

.menu ul li:hover ul li a:hover {
background:#5a3f2d;
color:#FFF;
z-index: 9999;

I cannot get it to show above the flash movie in ie6 or ie8. I know this is old school but I'm frustrated! Does my nav div need to have an absolute position? Is that why it doesn't work?

Example is here. Hover over the first link on the right: "CUSTOMER SERVICE"

Thanks all :)

The following worked for me: I found this solution at http://stackoverflow.com/questions/761402/why-doesnt-z-index-in-ie-render-the-way-its-supposed-to-over-a-flash-movie — user3009500, Nov 19 '13 at 15:38

score 8 · Answer 1 · answered Jan 21 '11 at 18:45

8

Hope this will help you , please take a look on. http://manisheriar.com/blog/flash_objects_and_z_index

answered Jan 21 '11 at 18:45

Irshad

81
2

3

Thanks! For the lazy: set the flash DIV wrapper to position:relative; and z-index:0; , then add the WMODE transparent param to the flash object and embed code. – Michael Butler Dec 01 '11 at 20:18
for ie9 and ie10 is "wmode" -> transparent enough – vkuzma Apr 11 '13 at 12:10
In my situation, worked, and I didn't have to mess with z-indexes. – James in Indy Dec 11 '13 at 13:33

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

I used the following and it worked for me.

<param name="wmode" value="opaque" />

I found this solution at Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie?

edited May 23 '17 at 12:08

Community

1
1

answered Nov 19 '13 at 15:42

user3009500

31
1

score 0 · Answer 3 · answered Jun 15 '16 at 17:36

I've seen many of these questions around and forums, but to let this clear, both options should be added in order to avoid from some versions to stop working:

<param name="wmode" value="opaque" />

and

<embed wmode="opaque" src="...">

src: http://manisheriar.com/blog/flash_objects_and_z_index

score -1 · Answer 4 · answered Dec 21 '10 at 17:51

-1

It might help to give the parent container (the table) and/or sibling container (the other "td" tag) a z-index of 1

answered Dec 21 '10 at 17:51

Girish Dusane

1,120
4
12
19

Thanks girdus, I gave it a shot and still no change :( – Dec 21 '10 at 22:25
Tried this. Does not work. Read up on it online. It does not work. Need to force render as part of normal document flow. Can do with addParam on SWFObject, attribute goes to "opaque" – Cris Stringfellow Oct 02 '12 at 08:29

DIVS over flash movies in Internet Explorer

4 Answers4