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 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
  • 201 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by UIJAD
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.