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 problem

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 css

Pls. help me out

Recommended Answers

All 9 Replies

please send the code ....

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 
}

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

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

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.

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

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

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

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.