Member Avatar for innovativeatul

Hi All,

I'm trying to make a drop down menu by using visibility of div. Using javascript also.

Pls. have a look at this page

When we rollover on about us the menu surely comes in IE but in Mozilla firefox doesn't work properly.

Pls. have a look at

Pls. help me out

  • 5 Contributors
  • 9 Replies
  • 219 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by UIJAD

Dani AI

Generated

Quick diagnosis and focused fixes (builds on points from , and ):

Most cross‑browser dropdowns that "work in IE but fail in Firefox" come down to stacking contexts and element referencing differences — not a magic z‑index bug. is right to suspect the animation/Flash as a possible overlay, and 's comment about the floating layout is also relevant. 's hint about how the element is referenced in script explains the IE/Firefox behavioral difference.

What to check and how to fix it, step by step:

  • Verify whether the animated/Flash header is actually covering the menu: temporarily hide that element in Firefox. If the menu appears, the plugin is overlaying the HTML. In that case the plugin must be run windowless (browser‑controlled) so HTML can render above it.
  • Confirm stacking contexts: z‑index only orders elements inside their stacking context. Make the menu’s container a positioned element (for example position: relative) and the submenu absolutely positioned with a high z‑index so it forms the correct stacking layer.
  • Avoid relying on IE quirks: do not depend on element IDs being global variables (IE-only). Use a reliable lookup (document.getElementById or a framework equivalent) and toggle the menu’s visibility with display:block/none (less layout‑quirky than visibility in some cases).
  • If layout/float structure is preventing the submenu from escaping its parent’s context, either move the submenu node to be a direct child of body and position it with JS, or restructure so the parent is positioned and can contain an absolutely positioned submenu.

Small practical example (structure + CSS approach):

<nav class="nav">
  <a class="link">About</a>
  <div class="submenu"> ... </div>
</nav>
.nav { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none; /* toggle to block when visible */
}

Debug tips: use Firefox Inspector to inspect computed z‑index and stacking context, toggle elements off to isolate the overlay, and test with the animated header removed. These checks will locate whether the problem is stacking context, plugin overlay, or a script/ID reliance issue.

Recommended Answers

All 9 Replies

Member Avatar for sreein1986

please send the code ....

Member Avatar for innovativeatul

Click on the link problem in the thread with blue color

Go into source code there you will be able to see the javascript i used. Secondly here is the css i used in header.htm which is included in the page iam using

Header :

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>VIVEKANAND INSTITUTE OF TECHNOLOGY</title>
<meta name="keywords" content="VIVEKANAND INSTITUTE OF TECHNOLOGY" />
<meta name="description" content="VIVEKANAND INSTITUTE OF TECHNOLOGY" />
<link rel="stylesheet" type="text/css" href="styles/header.css" />
</head>
<body>

<div id="mainheader" align="center">
<div id="flashheader">
	<object type="application/x-shockwave-flash" data="images/mainheader.swf" width="1000" height="306" title="atul-vitj">
		<param name="movie" value="images/mainheader.swf" />
		<param name="quality" value="high" />
		<param name="wmode" value="transparent" />
	</object>
	</div>
<div id="Menuwrapper">
<div id="homebutton">
<a href="index.htm">
<img border="0" src="images/home.jpg" alt="home" /></a>
</div>
<div id="aboutusbtn">
<a href="aboutus.htm">
<img border="0" src="images/aboutus.jpg" alt="aboutus" /></a>
</div>
<div id="programsbtn">
<a href="programs-offered.htm">
<img border="0" src="images/progrmasoffered.jpg" alt="programs"/></a>
</div>
<div id="campus">
<a href="campus.htm">
<img border="0" src="images/campus.jpg" alt="campus"/></a>
</div>
<div id="photogallery">
<a href="photogallery.htm">
<img border="0" src="images/photogallery.jpg" alt="photogallery"/></a>
</div>
<div id="training">
<a href="training-placement.htm">
<img border="0" src="images/trainingandplacement.jpg" alt="training"/></a>
</div>
<div id="contactus">
<a href="contactus.htm">
<img border="0" src="images/contactus.jpg" alt="contactus"/></a>
</div>
<div id="blank">
</div>
</div>
</div>
</body>
</html>

CSS OF HEADER :

html, body {
border:0;
margin:0;
padding:0;
}
BODY {
	FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left; width: 1000px
}
#mainheader {
	MARGIN-LEFT: auto; WIDTH: 1000px; HEIGHT: 434px MARGIN-RIGHT: auto; VALIGN: center
}
#flashheader {
	MARGIN-TOP: 0px; WIDTH: 1000px;
}
#Menuwrapper {
	MARGIN-TOP: 10px; WIDTH: 1000px; HEIGHT: 28px; background-image: url("../images/bgmenu.jpg"); 
}
#homebutton {
	FLOAT: left; MARGIN-LEFT: 20px; WIDTH: 72px; 
}
#aboutusbtn {
	FLOAT: left; WIDTH: 94px;
}
#programsbtn {
	FLOAT: left; WIDTH: 147px;
}
#campus {
	FLOAT: left; WIDTH: 90px;
}
#photogallery {
	FLOAT: left; WIDTH: 118px;
}
#training {
	FLOAT: left; WIDTH: 163px;
}
#contactus {
	FLOAT: left; WIDTH: 90px;
}
#blank {
	FLOAT: left; WIDTH: 185px; HEIGHT: 27px; BACKGROUND-COLOR: #bf2522 
}
Member Avatar for MidiMagic

Your moving picture is using all CPU time, leaving none for other functions.

Member Avatar for innovativeatul

can you pls. tell me where is the error why the zindex + javascript not working in mozilla

Member Avatar for tiger86

Well as midimagic said "your moving picture is taking up all the cpu time" that will cause the site to slow down majorly and possibly make your zindex and javascript not work.

Member Avatar for innovativeatul

I don't think that this is the problem because it is working very well in IE but its not working in mozilla

Member Avatar for tiger86

actually your main problem is "double floating" with your float coding.

Member Avatar for UIJAD

try instead of:

onmouseover="menu_visible(hiddenmenu)" onmouseout="menu_hidden(hiddenmenu)"

this

onmouseover="menu_visible('hiddenmenu')" onmouseout="menu_hidden('hiddenmenu')"

i know it might sound farfetched but given my experience in x-browser programming, even the smallest thing matter and are pesky

Member Avatar for UIJAD

and of course

instead of

function menu_visible(menu)
	{	
		menu.style.visibility="visible" 
		menu.style.cursor ="hand" 
	}

try

function menu_visible(menu)
	{	
		document.getElementById(menu).style.visibility="visible" 
		document.getElementById(menu).style.cursor ="hand" 
	}
Be a part of the DaniWeb community

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