CSS cross-browser issue

Question

I'm making a numbers game for people studying English as a second language. It's using a WordPress plugin that uses HTML5 and, as a fallback, Flash -- this will be important for me because many target users of my game will be in Asia where older browsers are used. The game involves 16 audio tracks that are all invisible on the page and one random one will be made visible via javascript fade in once the user clicks the start button.

Problem: In Chrome and Safari, the audio player is successfully hidden via CSS display: none . However, in my Firefox 5, the browser is (for some reason unknown to me, but it's good that this problem has arisen) using the Flash playeer and the styles are not applying to it, so there's 16 audio players on the screen in Firefox.

This is the CSS I am using.

Do you know a way to make this CSS apply to the flash player as well? The 16 audio tracks have ids from 1 - 16

#ONE, #TWO, #THREE, #FOUR, #FIVE, #SIX, #SEVEN, #EIGHT, #NINE, #TEN, #ELEVEN, #TWELVE, #THIRTEEN, #FOURTEEN, #FIFTEEN, #SIXTEEN {position: absolute; left: 0px; top: 0px; display: none; } 

This is a link to the game. Note, the game is unfinished so don't expect to play it. Right now you can only see the CSS problem depending on your browser.

NumbersGame

Answer 1

behavior confirmed on Firefox 3 too.

Here what i see with firebug on the 5th audio:

<div style="">
 <object id="f-FIVE" width="290" height="24" type="application/x-shockwave-flash"         name="f-FIVE" style="outline: medium none; visibility: visible;" data="http://eslangel.com /wp-content/plugins/degradable-html5-audio-and-video/incl/player.swf">
  <param name="wmode" value="opaque">
  <param name="menu" value="false">
  <param name="flashvars" value="initialvolume=80&soundFile=http://eslangel.com/wp-content/uploads/2011/07/five.mp3&playerID=f-FIVE">
</object> 

We can see that the style of your object id="f-FIVE" is visibility=visible.

If you change it to hidden the control is hidden.

Answer 2

First of all you should be using the HTML5 DOCTYPE.

Secondly, you seem to be serving MP3 files only which aren't supported by Firefox, which only supports OGG.

Using Firebug I can see that none of the many divs surrounding the Flash player actually has display:none set at all.

Answer 3

At the end of each <!-- degradable html5 audio and video plugin --> line there is some JavaScript that looks like this:

if (jQuery.browser.mozilla) {tempaud=document.getElementsByTagName("audio")[0]; jQuery(tempaud).remove(); jQuery("div.audio_wrap div").show()} else jQuery("div.audio_wrap div *").remove();

Which seems to be saying that if the browser is mozilla, then it should show the div that you have set to display:none . What was you intention for this bit of code?