Member Avatar for PsychicTide

Hey guys, ran into a bit of a problem with a CSS/Javascript drop-down menu... in IE7 I can see the menus and names just fine and everything works well, but in Firefox I can't see anything at all happening... the divs simply remain hidden.

Anyone who has a free sec to take a look at this, please do. Any advice is greatly appreciated.

HTML

<ul id="menu" style="text-align:left; vertical-align:middle; height:21px; overflow:hidden;">
    <li style="height:21px"><img src="trans.jpg" width="290px" height="21px" alt="" /></li>
    <li style="height:21px">
        <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"><img src="trans.jpg" width="74px" height="21px" alt=""  /></a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="#">Our Mission</a>
            <a href="#">Leadership</a>
        </div>
    </li>
...
</ul>

CSS

#menu
{	margin: 0;
	padding: 0;
	z-index: 10}

#menu li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#menu li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #000;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#menu li a:hover
{
	background: #000
}

#menu div
{	position: absolute;
	visibility: hidden;
	display:none;
	z-index:20;
	margin: 0;
	padding: 0;
	background: #000;
	border: 1px solid #5970B2
}

#menu div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #000;
	color: #FFF;
	font: 11px arial
}

#menu div a:hover
{
	background: #49A3FF;
	color: #FFF
}

Javascript

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;

Let me know if there is anything else that you may want to take a look at. I tried putting "ddmenuitem.style.display = 'block';" in the mopen function and the opposite in the mclose function with no luck.

Edited by PsychicTide because: n/a
  • 1 Contributor
  • 1 Reply
  • 173 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PsychicTide
Member Avatar for PsychicTide

It turns out that I had an div opacity issue with Firefox... all resolved now... thanks to those who at least took a look at what the problem could have been.

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.