Flash over Menu: problem is the code validation

[rogerjoyeux]

Hi All, first time with this so go easy on me please.
I want to validate my code.

I have fly-out menus that fly-out over a flash movie. At first, the flash layer covered the fly-out portion. I resolved the cover-up problem in the big 3 browsers (Chrome, IE, Firefox), and am happy with the outcome. However, the code validation says that the wmode="transparent" element is a problem.

Here is the code I am using. It works, but does not validate. The problem lies in the 'wmode' element. Using the 'transparent' value in both places, as shown below, gets the menu to fly-out properly in the big3 browsers. Using only one 'transparent' value works in 1 or 2 browsers but not all 3, but does not validate here either. What is the deal with the 'wmode', or how can I change the code to get it to validate?

<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="484" height="484" id="homemovie">
<param name="movie" value="flash/homemovie.swf" />
<param name="wmode" value="transparent">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/homemovie.swf" width="484" height="484" wmode="transparent">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

[Kraai]

Hi, have you seen this posting on Daniweb, similar to yours? http://www.daniweb.com/forums/thread267379.html

I think the same solution might help you to validate your code.

[rogerjoyeux]

Hi, Thank you for your reply, Kraai.
I had a look at the previous posting mentioned, and played with it a bit.

What I found was that, while the script I was using needed two references to the wmode, and while placing the second one inside the object tag worked, the wmode tag needed to be between the <object></object> tags, as opposed to within it.

So the code that works and validates properly look like this:

<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="484" height="484" id="homemovie">
<param name="movie" value="flash/homemovie.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/homemovie.swf" width="484" height="484">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

With this code, the problem and this thread are resolved.
Thank you Daniweb.

[Kraai]

Hey, glad you could solve it, and good luck.