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?


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" -->

<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>

<!-- End of Menu and JS -->

<style type="text/css">	
	/* hide from ie on mac \*/
	html {
		height: 100%;
	#flashcontent {
		height: 450px;
	/* end hide */


	<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
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
			<li class="dir">The Team
					<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>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
	<li class="dir">Services
			<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 &amp; Consulting</a></li>
	<li class="dir">Products
			<li><a href="./" class="dir">New</a>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
			<li><a href="./" class="dir">Used</a>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
			<li><a href="./">Featured</a></li>
			<li><a href="./">Top Rated</a></li>
			<li><a href="./">Prices</a></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>
			<li><a href="contact.htm">Enquiry Form</a></li>
			<li><a href="./">Map &amp; Driving Directions</a></li>
			<li><a href="./">Your Feedback</a></li>
<!-- 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");					

			<div id="footer">
				<p id="links">
				Copyright &copy; 2010 &minus; Four Musketters Studio &middot; Your Number 1 Choice.
					<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>


<!-- #EndTemplate -->


Hi anyone can advise? I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Please advise. Really need help, have no idea what I did wrong.

Working Website: http://17thstop.sg/demo
CSS Files: http://17thstop.sg/demo/styles.css

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.