[HTML/JAVASCRIPT] Navigation Bar Hidden Behind the Javascript

xd3vilx · 02-08-2010, 09:23 AM

Hi guys,

I have a javascript 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) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead.

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. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!!

Working Website:
Four Musketters Studio

CSS Files:
http://17thstop.sg/demo/styles.css
http://17thstop.sg/demo/css/default.advanced.css
http://17thstop.sg/demo/css/default.css
http://17thstop.sg/demo/css/dropdown.css

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

</head>

<body>
	<div id="content">
		<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>

<!-- Start of Menu -->	
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="index.htm">Home</a></li>
	<li class="dir">About Us
		<ul>
			<li><a href="about_us.htm">The Four Musketters</a></li>			
			<li class="dir">The Team
				<ul>
					<li><a href="darren.htm">Darren</a></li>
					<li><a href="jon.htm">Jonathan</a></li>
					<li><a href="hweek.htm">Hwee Key</a></li>
					<li><a href="gavin.htm">Gavin</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="cne.htm">Event & Commercial Photography</a></li>
			<li><a href="portrait.htm">Portrait Photography</a></li>
			<li><a href="wedding.htm">Wedding Photography</a></li>
			<li><a href="studio.htm">Rental of Studio</a></li>
			<li><a href="./">Training &amp; Consulting</a></li>
		</ul>
	</li>
	<li><a href="gallery3/gllery.htm">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="locationc.htm">Contact Us & Location</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 &copy; 2010 &minus; Four Musketters Studio &middot; Your Number 1 Choice.
				</p>
				<p>
					<a href="#">Home</a>
					<a href="#">Practice</a>
					<a href="#">Attorneys</a>
					<a href="#">Accidents</a>
					<a href="#">News</a>
					<a href="#">About Us</a>
					<a href="#">Contact Us</a>
				</p>
			</div>

</body>

<!-- #EndTemplate -->

</html>

fried-chicken · 02-08-2010, 02:13 PM

i know you said you tried the z-index method. but have you look at

CSS z-index property

DylanButler · 02-08-2010, 02:46 PM

apply wmode="transparent" to the EMBED code

fo.addVariable("wmode", "transparent");
fo.write("flashcontent");

02-08-2010, 02:13 PM	#2 (permalink)
fried-chicken NamePros Regular Join Date: Mar 2006 Location: Wigan, UK Posts: 522 Follow @bazkika	i know you said you tried the z-index method. but have you look at CSS z-index property __________________ Wigan Web Design \| Watches UK \| Canvas Pop Art

02-08-2010, 02:46 PM	#3 (permalink)
DylanButler NamePros Regular Join Date: Jan 2006 Location: San Diego, CA Posts: 735	apply wmode="transparent" to the EMBED code fo.addVariable("wmode", "transparent"); fo.write("flashcontent"); __________________ -Dylan Butler EXAMP - San Diego Web Design

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)