Spry vertical menubar is hiding behind youtube player

Spry vertical menu is hiding behind youtube player in IE 9, Google Chrome (Mac/PC) and Safari (PC). I am using Dreamweaver CS4. I have performed a verification and browser compatibility on the page and it comes up clean.

Any help would be greatly appreciated. index.html
<iframe width="480" height="360" src="http://www.youtube.com/embed/QYfHDM0An7A?rel=0" frameborder="0" allowfullscreen></iframe>

Open in new window

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

in the stylesheet :

iframe {z-index:-1}

Jason C. LevineDon't talk to me.Commented:
Cd& is correct.  You need to set the z-index CSS property so the menu is on top of the Iframe.  If you were using the embed tag method instead of the Iframe method you would do the same thing but also set the wmode transparency parameter in the embedding code.
ideasonlinecaAuthor Commented:
Thank you to both of you for your quick response. I was away much of the day and am getting back to this work this evening.

This seems like it should be an easy fix, but unfortunately, I have been unsuccessful so far. I have tried a couple of variations - without using the embed tag method - though that will be next.

I have implemented the z-index in the css file, tried removing the video from the div tag, all to no avail. I have uploaded the file to http://www.pacificspiritpilates.com/index_dec10.html. If you have any further ideas, I would be delighted to know them.
Well it works perfectly in Firefox.  But IE9 refuses. There is even and old IE5 hack in the stylesheet to get the menu on top.  I am so glad that HTML5 is finally going to get rid of these ugly media players.  

I don`t know what to recommend at this point if the menu has a higher z-index than the iframe then it should show in top.  The code in the style sheet is so old I am not sure whats going on there are still IE5 hacks being used. maybe you are going to have to try the embed.  


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ideasonlinecaAuthor Commented:
Well, thanks a lot. It turned out that the embed method worked perfectly, no trouble at all. Wished I had tried that earlier. Thanks again for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.