No replies
funal
Offline
newbie
Last seen: 17 years 36 weeks ago
Joined: 2004-09-13
Posts: 1
Points: 0

I have a problem with a drop down menu wich doesn't want to overlap a div with overflow.
It works with IE only, not firefox.
I tried with normal, float, absolute positionning but no success !
What can i do ?
I have a div centered in the middle of the page which is divided in two parts: infospace, workspace with overflow and each as a menu.

Here the source code :

<!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>
<title></title>
<link rel="shortcut icon" href="./favicon.ico" type="image/ico" />
<style type="text/css">

/******************** START LAYOUT ********************/
/*
DIV Global, Infospace, Workspace :
- global : width 900, height 700 (150 each menu element, by 6 = 900)
- infospace, workspace : width 450, height 350 (25 menu, 325 content)
*/

/* Black */
#global {
     background: #000000;
     color: #64879d;
     position: absolute;
     left: 50%;
     top: 50%;
     width: 900px;
     margin-left: -450px;
     height: 700px;
     margin-top: -350px;
}

/* Brown */
#infospace_menu {
     height: 25px;
     width: 100%;
     background: #5C3317;
}
/* Yellow */
#infospace_content {
     height: 325px;
     width: 100%;
     background: #FFFF00;
     overflow: auto;
}


/* Brown */
#workspace_menu {
     height: 25px;
     width: 100%;
     background: #5C3317;
}
/* Yellow */
#workspace_content {
     height: 325px;
     width: 100%;
     background: #FFFF00;
     overflow: auto;
}


/******************** END LAYOUT **********************/

/******************** START MENU **********************/
/*
Source : http://www.htmldog.com/articles/suckerfish/bones/
*/

body {
	font-family: arial, helvetica, serif;
}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

li { /* all list items */
	float: left;
	position: relative;
	width: 10em;
}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}
/*********************** END MENU ************************/


</style>

<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

</script>
</head>


<body>


<!-- _______________________________________________________________ Start Global _______________________________________________________________ -->
<div id="global">
<!-- ______________________ Start Infospace Menu    _____________________ -->
<div id="infospace_menu">

Infospace : menu

</div>
<!-- ______________________ End Infospace Menu      _____________________ -->
<!-- ______________________ Start Infospace Content _____________________ -->
<div id="infospace_content">

Infospace : content
<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test

</div>
<!-- ______________________ End Infospace Content   _____________________ -->



<!-- ______________________ Start Workspace Menu    _____________________ -->
<div id="workspace_menu">

<ul id="nav">

	<li>Sunfishes
		<ul>
			<li><a href="">Blackbanded sunfish</a></li>
			<li><a href="">Shadow bass</a></li>
			<li><a href="">Ozark bass</a></li>

			<li><a href="">White crappie</a></li>
		</ul>
	</li>

	<li>Grunts
		<ul>
			<li><a href="">Smallmouth grunt</a></li>
			<li><a href="">Burrito</a></li>

			<li><a href="">Pigfish</a></li>
		</ul>
	</li>

	<li>Remoras
		<ul>
			<li><a href="">Whalesucker</a></li>
			<li><a href="">Marlinsucker</a></li>

			<li><a href="">Ceylonese remora</a></li>
			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Slender suckerfish</a></li>
		</ul>
	</li>

</ul>


</div>
<!-- ______________________ End Workspace Menu      _____________________ -->
<!-- ______________________ Start Workspace Content _____________________ -->
<div id="workspace_content">

Workspace : content
<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test

</div>
<!-- ______________________ End Workspace Content   _____________________ -->
</div>
<!-- _________________________________________________________________ End Global      ____________________________________________________________ -->


</body>
</html>