Hi guys,
I have a drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) in Firefox. But when I tested it in IE, it did not managed to overlay the javascript script and the drop-down went to the back of the script instead. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!!
My problem is something like http://www.daniweb.com/forums/thread51184.html but unlike him where it a flash script, mine is a java script running the .swf file. I tired a few flash related solution but doesn't work. So what can I do?
Cheers!
My code:
<!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">
<!-- #BeginTemplate "index.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>
<script type="text/javascript" src="gallery/swfobject.js"></script>
<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- End of Menu and JS -->
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow:hidden;
}
#flashcontent {
height: 450px;
}
/* end hide */
</style>
</head>
<body>
<div id="content">
<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1>
<!-- Start of Menu -->
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="./">History</a></li>
<li><a href="./">Our Vision</a></li>
<li class="dir">The Team
<ul>
<li><a href="./">Brigita</a></li>
<li><a href="./">John</a></li>
<li><a href="./">Michael</a></li>
<li><a href="./">Peter</a></li>
<li><a href="./">Sarah</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="./">Product Development</a></li>
<li><a href="./">Delivery</a></li>
<li><a href="./">Shop Online</a></li>
<li><a href="./">Support</a></li>
<li><a href="./">Training & Consulting</a></li>
</ul>
</li>
<li class="dir">Products
<ul>
<li><a href="./" class="dir">New</a>
<ul>
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li><a href="./" class="dir">Used</a>
<ul>
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul>
</li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li><a href="./" class="dir">Contact Us</a>
<ul>
<li><a href="contact.htm">Enquiry Form</a></li>
<li><a href="./">Map & Driving Directions</a></li>
<li><a href="./">Your Feedback</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of Menu -->
<div id="content1">
<!-- #BeginEditable "BodyContent" -->
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<!-- #EndEditable -->
<script type="text/javascript">
var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery/gallery.xml");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery/gallery.xml");
fo.write("flashcontent");
</script></div>
<div id="footer">
<p id="links">
Copyright © 2010 − Four Musketters Studio · Your Number 1 Choice.
</p>
<p>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">News</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</p>
</div>
</body>
<!-- #EndTemplate -->
</html>