Hi everyone,
I've been spending hours now reading up on IE7's issue with rendering Flash content on top of other elements, particularly navigation menus (this is often a problem with dropdown menus and Flash ad banners, for example). I've tried a few of
the suggested solutions but none have worked for me so far. I'll do my best to explain
the circumstances, and would appreciate any advice in
the matter!
Update
At Mercator's request, I am providing a large code-sample to assist in any advice you might have. Consider
the HTML below:
<body>
<div id="page-wrap">
<div id="content-wrap">
<div id="main">
<h1>Page Title</h1>
<p>Paragraph text before video.</p>
<div class="video-container">
<script type="text/javascript">
AC_FL_RunContent('id','player','name','player','width','480','height','294','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=mp4/VIDEO_FILE.mp4','movie','player' ); //end AC code
</script>
<noscript>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="294">
<param name="wmode" value="transparent" />
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=mp4/VIDEO_FILE.mp4" />
<embed
wmode="transparent"
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="480"
height="294"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=mp4/VIDEO_FILE.mp4"
></embed>
</object>
</noscript>
</div>
<p>Paragraph after video.</p>
</div><!-- end main -->
<div id="subContent">
<p>Sub-content.</p>
</div><!-- end subContent -->
<div id="content-clear"></div>
</div><!-- end content-wrap -->
</div><!-- end page-wrap -->
<div id="footpanel">
<ul id="mainpanel">
<li id="panel-link"><a href="#"><span class="icon"></span>Panel Link</a>
<div class="subpanel">
<h3><span> – </span>Panel Link</h3>
<ul>
<li><p>Revealed content</p></li>
</ul>
</div>
</li>
</ul>
</div> <!-- END footpanel -->
</body>
Below are
the non-presentational CSS selectors that apply to
the divs above:
body { /*no positioning styles applied */ }
#page-wrap { width: 100%; }
#content-wrap { width: 960px; margin 0 auto; }
#main { float: left; width: 573px; }
.video-container { position: relative; width: 480px; z-index: 1; }
#sub { float: left; width: 347px; }
#content-clear { clear: both; }
#foot-panel { position: fixed; width: 94%; bottom: 0; left: 0; z-index: 3000; }
ul#main-panel { float: left; }
The footpanel uses jQuery-powered flyout menus, if that provides any further context. These menus have z-indexes in
the 300X range to appear
above the footpanel.
The Flash in question is JW player playing a flash video or mp4. Currently,
the object and embed tags are inside a container div.
My understanding of previous solutions was that
the combination of
the param changes and
the positioning/z-index change on
the container div should have resolved
the issue. Alas, it is not so.
The player resides on top of
the footpanel.
Other information that may or may not be helpful is that
the page is XHTML 1.0 Transitional and that Dreamweaver reports 1 error in
the HTML code: <embed> is not in
the XHTML 1.0 specification. This fact does not prevent
the video from being viewed in any browser tested, and
the page still displays correctly in FF.
Thanks in advance!
