• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 643
  • Last Modified:

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

0
ideasonlineca
Asked:
ideasonlineca
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
in the stylesheet :


iframe {z-index:-1}



Cd&
0
 
Jason C. LevineNo oneCommented:
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.
0
 
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.
0
 
COBOLdinosaurCommented:
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.  


Cd&
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now