(this is a posting of a message that I posted at wikidot.com, I'm sort of desperate…)
I am trying to insert a flash generated menu bar in the top of my wiki site. I am using iframe to do it, and it works perfectly on Safari, Firefox, and IE 7. You can see it here on this test page, under the top graphic (there is also still the normal wiki top menu bar as well, which I would remove later):
http://karma-lab.wikidot.com/sandbox:menubar-test
It uses swfobject.js with a setting of wmode = transparent to embed the flash menu bar, inside the html file that is [[iframed]] (source is included below).
The problem is that in IE6, the iframe is NOT transparent, it has a white background, completely covering the page for about 300 pixels down.
If I use the "IE DOM Inspector" plug-in in IE6 to "live edit" the html being displayed, the only thing that works is to add allowTransparency="true" to the <iframe> tag. Instantly, the iframe is transparent and it works as expected.
However, there seems to be no way to actually influence the setting of this from within wikidot, or from the CSS sheet. allowTransparency seems to be an html only parameter, and it is not one of the ones that wikidot allows to be set using [[iframe]]. As you can see from the source below, I try to set it in multiple different places in the CSS file and the wiki source, just for the heck of it.
Any way to get around this? I'd really like to use this flash top menu, but if it can't work on IE 6, I think I have to bag it. Sad, after spending like two days figuring out how to get this far. Here's my source:
The test page in the wiki:
[[div class="menubar-wrapper"]]
[[iframe http://www.mydomain.com/flashobj/wiki-menubar_nt.html class="menubar-iframe" frameborder="0" scrolling="no" width="668" height="300" allowTransparency="true"]]
[[/div]]The iframed file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css" media="all"><!--
#menubar { }
--></style>
<script type="text/javascript" src="/flashobj/swfobject.js"></script>
<script type="text/javascript">
function changeSize(id, value)
{
document.getElementById(id).style.height = value + 'px';
}
</script>
</head>
<body>
<div id="menubar" style="height:30px; width:668px; left:0px; top:0px; position:absolute; margin:auto; overflow:hidden;" onmouseover="changeSize('menubar', 300);" onmouseout="changeSize('menubar', 30);">
MenuBar
<script type="text/javascript">
var swf100 = new SWFObject("wiki-topmenu.swf", "MenuBar", "668", "300", "7.0.22", "#000000", true)
swf100.addParam("scaleMode","noscale");
swf100.addParam("align","TL");
swf100.addParam("allowScriptAccess","sameDomain");
swf100.addParam("wmode", "transparent");
swf100.write("menubar")
</script>
</div>
</body>
</html>The applicable CSS:
.menubar-iframe {
allowTransparency:true;
}
.menubar-wrapper {
allowTransparency:true;
height:30px;
width:668px;
overflow:visible;
position:absolute;
top:94px;
left:250px;
right:0px;
margin-right:auto;
margin-left:auto;
z-index:200;
}
.menubar-wrapper p {
margin:0px;
allowTransparency:true;
}
