Scrolling div over Flash = ouch :(

programming web dev
1

I’ve created a scrolling div (with overflow:auto) and put it on top of Flash. Since I’ve had no trouble just putting a plain old div on top of Flash movies (with wmode=transparent), I figured a scrolling div would be no different… but I was wrong. Sometimes you see no scrollbar at all (but it appears when you select text beyond the borders of the div), sometimes you see a scrollbar but it flickers, or the content itself flickers, or disappears. The behavior is different depending on the browser. Has anyone had this problem before?

I’ve attached my files, but here is some code if it’s quicker.

Here’s my CSS code:


#myFlash {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
}
#myDiv {
    position: absolute;
    z-index: 2;
    left: 60px; top: 120px;
    width: 450px; height: 250px;
    overflow: auto;
    background-color: transparent;
}

And here’s my HTML code:


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="embedder.js"></script>
</head>
<body>
<div id="myDiv">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque ..... (lots of text)</p>
</div>
<div id="myMovie">
<script language="JavaScript" type="text/javascript">
    makeFlash();
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="flash.swf" quality="high" bgcolor="#ffffff" wmode="transparent" width="550" height="400" name="flash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>

Note: The javascript in the HTML code just document.writes the code that you see in <noscript>, to avoid the whole IE Active X issue.