wmode='transparency' content accessibility issue

[infernosnow]

Bare with me as this might be a bit confusing: I have a webpage with content and a flash file. The flash file is inside a DIV. This causes the flash file to overlap all other content in the page - like a layer. When the page first loads, you have the flash file at the top. It is a menu system. When you click a button, the submenus come out, overlapping the other html content of the page.

Now in order to do this, the flash file is actually not the size it appears to be. The menu system is 120 pixels in height, but the flash file is actually 700 pixels in height. So what's inbetween the 120 pixels of menu and the bottom of the flash file? Transparency. I use the Window Setting "Transparent Windowless" in the publish settings. I have to have the flash file be 700 in height to allow the submenus to outstretch from the 120 high menu space - so they overlap the rest of the content in the page. If the flash file is only 120 pixels in height, the submenus would not show up.

Now the problem with this is that you cannot click on any html underneath the flash file. Since it is 700 in height, it basically covers the entire page. Mind you this problem is in Firefox only - it works fine in IE. You can select any html text you want in IE, but not in FF. I have tried several workarounds, but all have failed. I now come here for help.

Some of the work-arounds I have tried:
-writing a javascript function to resize the DIV tag. It would be 120 at first, but if the user clicks a button for a submenu in the flash file, it extends the height to 700. When the user exits the submenu, it resizes the DIV tag to 120 so all other content is clickable/highlightable. This solution did not work. It actually had no effect whatsoever.

-same thing, only I added a height to the OBJECT tag the flash file is located inside. This also did not work. It had no visual effect at all.

-same thing, only resizing the EMBED tag height. This did have a visual effect - it indeed did resize the flash file, but not as I had hoped. It made the height go down to 120, but it decided to scale the width as well to maintain the aspect ratio.

-So I tried the same thing, only I changed the scale value in the publish settings to no-scale. I would have thought this would have just clipped off the bottom excess transparency like I wanted, but for some reason it physically moves the flash file UP! This completely perplexes me. Perhaps I do not fully understand the no-scale attribute. The other scale options did not work either. "noborder" seems to move it up as well and the "exact fit" option would only distort the aspect ratio even if it did work.

So I am at a loss. I do not know what to do. Does anyone have an idea?

[mooska]

-same thing, only resizing the EMBED tag height. This did have a visual effect - it indeed did resize the flash file, but not as I had hoped. It made the height go down to 120, but it decided to scale the width as well to maintain the aspect ratio.

-So I tried the same thing, only I changed the scale value in the publish settings to no-scale. I would have thought this would have just clipped off the bottom excess transparency like I wanted, but for some reason it physically moves the flash file UP! This completely perplexes me. Perhaps I do not fully understand the no-scale attribute. The other scale options did not work either. "noborder" seems to move it up as well and the "exact fit" option would only distort the aspect ratio even if it did work.

These two were ok, just set Stage.align = "TL"

[infernosnow]

Holy mother of cheeseballs. It works. I have been trying to fix this problem for hours. Literally... hours. I have been sitting in this very chair for the entire time. I can't believe you replied so fast and the fix is so simple. I came pretty far on my own though didn't I? Just couldn't get that last bit. I would have never figured that out on my own. Never. Thankyou very very much. I appreciate it so much.

[mooska]

You are welcome glad I could help

[Goose]

Hello, I have the same exact issue and have something that works for Flash 6. Does yours work with Flash 8 AS2.0 and would you mind sharing?

[scheinarts]

I have the same issue with Fire Fox (and Safari) too. I ve followed everything in this post, yet my flash movie in FF and Safari is over the html content making it UNclickable, yet IE 6 & 7 the same exact codes works like a charm.

My AS2 Code:

Stage.scaleMode = "noScale";
Stage.align = "TL";

import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse,PennerEasing);

function moveMask():Void{
    getURL("javascript:expand('flashid');");
    var f:Fuse = new Fuse();
    f.push({target:masker, width:450, easing:"easeOutBounce"});
    f.start();
}

function outMask():Void{
    var f:Fuse = new Fuse();
    f.push({target:masker, width:190, easing:"easeOutBounce"});
    f.start();
    if(masker.width == 190){
        getURL("javascript:collapse('flashid');");
    }
}

masker.onRollOver = moveMask;

masker.onRollOut = masker.onReleaseOutside = outMask;

My Javascript code:

function expand(divid){
	document.getElementById(divid).style.clip = "rect(0px 450px 300px 0px)";
}

function collapse(divid){
	document.getElementById(divid).style.clip = "rect(0px 190px 300px 0px)";
}


function makeBanner(){
	document.write('<object data="publicidad/banner.swf" width="100%" height="300" type="application/x-shockwave-flash">');
	document.write('<param name="movie" value="publicidad/banner.swf" />');
	document.write('<param name="quality" value="high" />\n');
	document.write('<param name="wmode" value="transparent" />');
	document.write('<embed src="publicidad/banner.swf" quality="high" width="100%" height="300" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\n');
	document.write('</object>');
}

My HTML Code:

					<div style="visibility: visible; position: relative; width: 190px; height: 300px; z-index: 12;"> 
                <div id="flashid" style="width: 450px; height: 300px; z-index: 11; position: absolute; overflow: hidden;"> 
                  <script type="text/javascript">makeBanner();</script>
                </div>
              </div>

Hopefully some one can point what I've done wrong to make it work properly in FF and Safari.

Any help greatly appreciated. Thanks!

Allen