0

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

5
Contributors
9
Replies
10
Views
9 Years
Discussion Span
Last Post by UIJAD
0

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

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.

0

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

0

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

0

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" 
	}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.