How do I get a div container and its contents to appear above a Flash SWF file?

I have a webpage where I want the div container (id="tableofcontents") to appear above a flash swf file that takes up the whole page but its not appearing. I've set <param name="wmode" value="transparent" /> to the <object> tags and I messed around with the z-index of various div containers to no avail. Does anyone have any ideas? My stylesheet is listed below and the layout code is attached.

<style type="text/css" media="screen">
                  html, body      { height:100%; }
                  body { margin:0; padding:0; overflow:auto; text-align:center;
                         background-color: #ffffff; }  
                  #flashContent { display:none; }
                  
                  #overallcontainer {position:relative;width:100%;height:100%;}
                  #flashcontainer {position:absolute;z-index:2;width:100%;height:100%;}
                  #tableofcontents {position:absolute;top:20px;left:20px;z-index:200;width:100px;height:40px;}
                  .tableofcontentsfont {font-family:Arial, Helvetica, sans-serif;color:#000000;}
        </style>
<div id="overallcontainer">
        <div id="flashcontainer">
        <div id="flashContent">
        	<p>
	        	To view this page ensure that Adobe Flash Player version 
				9.0.0 or greater is installed. 
			</p>
			<script type="text/javascript"> 
				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
				document.write("<a href='http://www.adobe.com/go/getflashplayer'>Get Adobe Flash Player<\/a>" ); 
			</script> 
        </div>
	   	
       	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlipBookBuilder">
                <param name="movie" value="book.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <param name="wmode" value="transparent" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="book.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                    <param name="wmode" value="transparent" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                	<p> 
                		Either scripts and active content are not permitted to run or Adobe Flash Player version
                		9.0.0 or greater is not installed.
                	</p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                       Get Adobe Flash Player
                    </a> 
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
	    </noscript>	    
	   <!-- end flash container --></div>
       <div id="tableofcontents" class="tableofcontentsfont">Table of Contents
        </div>
        <!-- end overallcontainer --></div>

Open in new window

iamdiggnifiedAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Got it.

Here is a good writeup on doing this. Let me know if you need any further direction.

http://www.andrewsellick.com/95/flash-movies-as-backgrounds
0
 
jonahzonaCommented:
I ran this in my browser, but I am confused as to what you are trying to accomplish.

The #flashContent doesn't show because it has a display:none;. Is that intentional?
0
 
iamdiggnifiedAuthor Commented:
The #Flash Content is for people who have or may not have flash player. I wrapped #Flashcontent as well as the Flash File in a div container called "flashcontainer". The "tableofcontents" div container (which I want to appear over #"flashcontent") is in its own div. And finally both are wrapped in a div container called # "Overallconatiner".
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
jonahzonaCommented:
Ok.

But what is it that you are wanting to accomplish? Do you want the flash playing as a background?
0
 
iamdiggnifiedAuthor Commented:
yes. Flash is the background and a div container is on display on top of that. I want to put some text in there.
0
 
Dean OBrienCommented:
You need to set WMODE to transparent
Then set the z-index values of each div accordingly.
Easynow
0
 
iamdiggnifiedAuthor Commented:
Easynow. If you look at my code the wmode is set to transparent and the z-index values too
0
 
iamdiggnifiedAuthor Commented:
I got it working but not in IE.
0
 
Dean OBrienCommented:
This is the code i normally use for flash

<div id="main-image-holder">
            <!--[if !IE]> -->
                  <object type="application/x-shockwave-flash" data="darnaflash.swf" width="557px" height="277px" wmode="transparent">
            <!-- <![endif]-->
            <!--[if IE]>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="557px" height="277px">
                  <param name="movie" value="darnaflash.swf">
            <!--><!--dgx-->
                  <param name="loop" value="true">
                    <param name="menu" value="false">
                    <param name="wmode" value="transparent">

                    <img src="images/main-banner.jpg">
                  </object>
            <!-- <![endif]-->


You will notice wmode is set in two places for IE nd other

Easynow
0
 
Jeremy DaleySenior DeveloperCommented:
i'm not sure why you're trying to embed an <object> inside of an <object>. i wouldn't trust that embed code you're working with there.
0
 
iamdiggnifiedAuthor Commented:
I still can't get a simple <div> container to appear above my flash content in IE. I set the wmode to "transparent" in both places. It works in Firefox and I created a javascript pop up window which will appear over the flash file in both IE and FF. How can the javascript popup window appear above the flash file but my div won't. I didn't see anywhere in the popup window code that mentioned z-index. Is there javascript code that overrides a z-index value?
0
 
Dean OBrienCommented:
Try this link
http://www.boutiquebarshow.com/

Does the menu float above the flash? If so it was done as i mentioned, using z-index.

Easynow
0
 
jonahzonaCommented:
Did this ever get solved?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.