Flash iframe over div with z-index: 9999

Asked

Viewed 243 times

0

Some components of my Flash chat are above the div header. As you scroll the screen, these components disappear and reappear. Follow the image:

captura

I don’t have access to Flash, that’s the problem, follow the Flash inclusion code:

          <!-- BATE-PAPO -->
          <section id="batepapo">
          <h2>Bate-Papo</h2>
          <p><iframe src="http://exemplo.org" width="100%" height="500"></iframe></p>
          </section>
          <!-- FIM BATE-PAPO -->
  • Good morning, welcome to Stack Overflow. I ask you to please elaborate a little more on your question, or it can be flagged as low quality. The images, you can include right in the post and it is customary to include some of your code so that those who help you have to go from there. Good luck!

  • I am beginner, thanks for the tip and thanks for the welcome!

  • @Lucassaliésbrum have you checked if both the iframe and the header have z-index? Which browsers are having the problem?

  • @Lucassaliésbrum not connected to the question, but just so you know, there are some JS/Ajax/PHP IRC clients on the web, I think deleting flash will help your site to be used on various mobile devices. Here is a list: http://www.vedetta.com/ajax-irc-clients-list

  • @Bacco the problem only occurs in Crunchbang (a Debian derivative) using Google Chrome, on Windows using any browser, the problem does not occur (not that I recall). Thanks for the help, I will take into consideration implementing another type of chat.

1 answer

1


It’s not very secret and has nothing to do with z-index, just add the following to the tag <param>: wmode="transparent".

So it’s going to stay that way, for example:

<object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;">
   <param name="allowfullscreen" value="true" />
   <param name="wmode" value="transparent">
</object>

After adding the property wmode with the value transparent, he will begin to respect the z-index of the CSS.

I hope I’ve helped

  • Yes, thank you and sorry for the delay.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.