I do appreciate your support in this issue.
In the interest of leaving behind something useful for others I'd like to try and summarize our efforts here.
Atomic, Please correct me if I get anything wrong.
The problem
I was trying to resolve an issue that began with the following challenge.
I had a drop down menu that was to be displayed with a transparent background in order to reveal html in other div tags on a lower z-level.
If I were to simply allow the flash at it's full size to overlap the html, links in the html were not active under Firefox.
I also wanted to eliminate the active content message in IE. As I would with any flash deployment.
One further complication was that the div tag that was to host the flash content was explicitly (absolute) positioned on the page over the html content.
I began by using a getURL javascript call to increase or decrease the size of the div tag as needed to reveal the drop downs as the mouse ran over them. So far so good.
However, when adding swfObject to resolve the IE active content messages, I was no longer able to effectively resize the div tag.
So with Atomics assistance, we began to identify the issues and come to a conclusion.
I created a set of sample flash/html files to demonstrate the problem isolating the issues to those mentioned above.
Conclusion
Here is the end result (http://www.moretothestory.com/resizetest/resizer2.html) working as desired in Firefox, Safari and IE.
Here are the source files (http://www.moretothestory.com/resizetest/srcfiles.zip)used to demonstrate the solution.
I have revised the files developed by Atomic to demonstrate more explicitly the solution I was after and to eliminate any code that was extraneous to the solution.
There are many reasons I did not want to publicly make available the source to my menu bar, not the least of which were the hours I spent developing it.
More specifically the menubar I created was not necessary to demonstrate the issue I was trying to resolve. The much simpler example I produced as part of the example we used to resolve the problem was more appropriate.
With that said, Atomics contributions were invaluable to arriving at the conclusions I have provided here. Thanks again.
Solution
Resizing the div tag was not an effective solution for the dealing with flash object on the page after introducing swfobject (or any other means of adding the object to the page using javascript).
Instead it is necessary to resize the object itself. You do so by addressing the id of the object as it is defined by your script that adds the object to the page.
If you look at the swfObject code that follows the div that will contain the flash object you see the id assignment (the second value sent to swfObject "resizer").
<div id="flashcontent" style="position:absolute;">
no scripting allowed or flash player not present.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("resizer2.swf", "resizer", "550", "200", "6");
so.addParam("scale", "noscale");
so.addParam("wmode", "transparent")
so.write("flashcontent");
// ]]>
</script>
resizer will be our target for the resize.
The javascript function that has been added to the head of our html page along with the include of the swfobject.js file is as follows:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!--
function resizeSWF(nHeight) {
//alert(nHeight);
nHeight += "px";
document.getElementById("resizer").style.height = nHeight;
}
//-->
</script>
Note that getElementByID uses "resizer" as the target for setting the height style. This same method can also be used to set the width of the flash object.
The styles for the 2 div tags that contain the text which the flash will be positioned over (covertext) and the flash object (flashcontent) are set as follows:
<style type="text/css">
body {
margin: 0;
background-color: #ffffff;
}
#flashcontent {
width: 550px;
margin:97px auto;
z-index:2;
}
#covertext {
position:absolute;
margin:310px auto;
}
</style>
This positions the flash content 97 pixels below the top of the page and sets the width to match our flash object. The text will appear below the top half of our flash object allowing the bottom portion of the flash object to overlap.
The 2 div tags appear in the body of the html as follows:
<div id="covertext">
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="240">This text should be covered while<br /> flash window is expanded. </td>
<td width="210">This text should always be visible through transparent portion of flash window<br /><br /> text to the left may be covered by a graphic when flash window is expanded, otherwise it should be seen to the left of this text<br /><br /><a href="http://WWW.google.com/"> LINK </a></td>
</tr>
</table>
</div>
<div id="flashcontent" style="position:absolute;">
no scripting allowed or flash player not present.
</div>
Note that the flashcontent div has a style setting. The absolute positioning needs to be set here for some reason. It appears that when swfobject replaces the content of the div that if the absolute setting is not done in the div tag it is not respected even if it has been set in the style (CSS) for that div.
Finally we need to have our flash code incorporate the javascript function to alter the flash object dynamically when we are exposing/contracting the drop down portion of our menu.
Stage.scaleMode="noScale";
Stage.align. = "TL";
// if expand = false, flash window is contracted, else expanded
var expand = false;
this.button_mc.onRelease = function () {
if (this.expand) {
getURL("javascript:resizeSWF(200)");
this.expand = false;
this.bname.text = "DOWN";
} else {
getURL("javascript:resizeSWF(400)");
this.expand = true;
this.bname.text = "UP";
}
};
stop ();
Note that it is important to set your scaleMode for the stage or your flash content will be shrunk when the flash object is reduced to a size smaller than what you used to design the flash content. Also the Stage.align setting must be used to ensure that the flash content is not simply centered in the div which when contracted will hide some of the flash content.
The sample files have all this code as shown here.