what's going on here? in the following code the popup div is set to dissapear onmouseout of the div. in firefox (2 mac) that happens but also it happens within the popup div -- the blue area shows where the "hole" is:



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css">
	body { font-size:120%; font-family:sans-serif; line-height:1.5; margin:3em; }
	#roll { border:2px dashed #aaa; padding:.1em .3em; white-space:nowrap; }
	#popup { border:1px solid #999; position:absolute; width:10em; padding:1em; background-color:#fff; }
	</style>
	<script type="text/javascript">//<![CDATA[
function Menu() {
	this.displaying = false;
	this.popup = document.createElement("div");
	this.popup.setAttribute("id", "popup");
	this.popup.setAttribute("onmouseout", "popup.hide();");
	this.popup.innerHTML = "<ul><li>one<\/li><li>two<\/li><\/ul>";
}
Menu.prototype.display = function() {
	if( this.displaying == false ) {
		var roll = document.getElementById("roll");
		this.popup.style.top = getY(roll) + "px";
		this.popup.style.left = getX(roll) + "px";
		document.body.appendChild(this.popup);
	}
}
Menu.prototype.hide = function() {
	this.displaying = false;
	this.popup.parentNode.removeChild(this.popup);
}

var popup = new Menu();

function getX(e) {
	var x = 0;
	while(e) {
		x += e.offsetLeft;
		e = e.offsetParent;
	}
	return x;
}
function getY(e) {
	var x = 0;
	while(e) {
		x += e.offsetTop;
		e = e.offsetParent;
	}
	return x;
}

	//]]>
	</script>
</head>
<body>

<p>
This is my test text. This is my test text. This is my test text.
This is my test text. This is my test text. This is my test text.
This is my <span id="roll" onmouseover="popup.display();">test rollover menu</span>.
This is my test text. This is my test text. This is my test text.
This is my test text. This is my test text. This is my test text.
This is my test text. This is my test text. This is my test text.
</p>

</body>
</html>
why is that "hole" there? bug? something i've dont wrong?

thanks.

ps, looks like possibly the ul is making the "hole"? it's also happening in safari so i guess it's not a ff bug.

pps, yup, that looks correct (the ul making the "hole"). i've just put a bakcground colour onto the ul and it is that exact area which is the hole (my blue drawn box comes down much too low). so how to stop the ul making a hole? thanks.