[jickpictures]

I have a flash video and a jquery drop down menu on my website at : Jick | Short movies for short attention spans. For some reason, on IE6-7 and Firefox for Windows, the jquery menu does not show up on top of my flash video. It's supposed too. I tried messing with it by adding

Code:

z-index: 1;

on the video, and for the drop down menus a

Code:

z-index: 504;

I'm actually not sure if it's working because I can't test it in IE6-7 or Firefox for windows. Can someone help me out and see if it worked? It's the "Watch More" and "Extras" drop down menu at the top of the page.

And if it doesn't work, can you maybe give me a suggestion on how to fix it? Thank you.

Ryan

[Yeroon]

For now it only works for Firefox on Windows. Safari, IE7, 8, 9 (alpha developer test version) and Chrome show the menu under the movie. I'll try and find out why, but since I have to work with your website and have to modify all the relative paths, it might take little while.

I'll get back to you asap.

/Yeroon

[Yeroon]

OK Found it. Z-Index has no influence on your situation as you dont use obsolute positioned elements. The solution is in the object and embed tag of your video:

Change:

Code:

<object style="z-index:2;" width="900" height="506"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13900625&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed  src="http://vimeo.com/moogaloop.swf?clip_id=13900625&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="900" height="506"></embed></object>

to:

Code:

<object style="z-index:2;" width="900" height="506" wmode="transparent"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13900625&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed  wmode="transparent" src="http://vimeo.com/moogaloop.swf?clip_id=13900625&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="900" height="506"></embed></object>

So add wmode="transparent" to both the object and the embed tag. Problem solved!

[jickpictures]

OH yes, you are the greatest, thank you so much for helping me out!

Maybe you can help me out with something else real quick. Can you tell me if the website is all intact in IE and everything? It's okay if can't and you're busy. I'm working on getting Parallels for Mac so I can test it out.

Again, thanks so much for your help.

[jickpictures]

Nevermind Yeroon. I got Parallels and am testing it on all browsers. However, I noticed that the drop down menu doesn't work at all in IE7. Do you know why that is?

[Yeroon]

At the workplace I am now I don't have the real IE7. I can only put IE8 in IE7 compat mode. It works fine there. I will try and open your website in a real IE7 asap.

/Yeroon

[Yeroon]

Hi,

You need to remove the position:relative from your frontpage.css file in the following sections:

#top2 {
    margin-left: auto;
    margin-right: auto;
    REMOVE HERE
    width: 900px;
    height: 98px;
}
 
#navcontent {
    float: right;
    REMOVE HERE
    width: 620px;
    height: 98px;
}
 
#navbottom {
    background: url(../images/navbottombg.png);
    margin-left: auto;
    margin-right: auto;
    REMOVE HERE
    width: 620px;
    height: 26px;
}
 
#extras {
    float: right;
    left: -2px;
        REMOVE HERE
    width: 140px;
    height: 26px;
} 

You might want to check your layout after you modify this of course. Not sure what influence it has on the rest of your page.

[jickpictures]

You are amazing Yeroon. Solved all my problems. Thanks again!

[dynamicdreamz1]

I just had this problem and the fix I found (thanks to Quirksmode) was to give the direct parent of the node you are trying to set a z-index of it's own z-index that is at less than the z-index of the node you are trying to set. Here is a quick example that should work in IE6

<html>
<head>
<style type="text/css">
#AlwaysOnTop {
background-color: red;
color: white;
width: 300px;
position: fixed;
top: 0;
z-index: 2;
}
#Header {
color: white;
width: 100%;
text-align: center;
z-index: 1;
}
</style>
</head>
<body>
<div id="Header">
<div id="AlwaysOnTop">This will always be on top</div>
</div>
<div id="Content">Some long amount of text to produce a scroll bar</div>
</body>
</html>


Surat web design company