Buongiorno a tutti.

In una pagina ho la necessita di inserire due div su più livelli. Seguendo le istruzioni trovate in rete ho scritto il codice che riporto qui sotto.

Il problema consiste nella visuallizzazione con Firefox in quanto questo browser mi lascia sempre un "bordo" di almeno 5 - 10 px nella parte superiore.

QUesto "difetto" non si presenta con IE e Safari.

Come posso risolvere?

Vi ringrazio per l'aiuto.

( E' solo una prova quindi il codice è un po disordinato )

codice:
<style type="text/css">
html, body{  
    width: 100%;  
    height: 100%;  
    leftmargin: 0;
    topmargin: 0;
    padding: 0;  
} 

div#background {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
background-color: #FF00FF;
filter: alpha(opacity=30);
opacity: 0.3;
z-index: 1;
padding: 0;
}
div#div1 {
position:absolute;
top:50%;
left:50%;
width:400px;
height:200px;
margin-left:-200px;
margin-top: -100px;
color:#000000;
font-weight:bold;
background-color:#ffffff;
z-index:2;
}
div#div2 {
position:absolute;
top:50%;
left:50%;
width:400px;
height:200px;
margin-left:-200px;
margin-top: -100px;
color:#000000;
font-weight:bold;
border-style: dashed;
border-width: 3px;
border-color: #080808;
z-index:2;
filter: alpha(opacity=0);
opacity: 0.0;
}
div#div3 {
position:absolute;
left: 15px;
top: 30px;
width:20px;
height:30px;
background-color:#CCCCCC;
border-style:dashed;
z-index:3;
}
table#help {
margin: 0;
background-color: #ffffff;
padding: 0;
</style>

<script language="javascript">
	function mostra(finestra) 
		{ document.getElementById("background").style.display="block"; 
		  document.getElementById(finestra).style.display="block"; }
	function nascondi(finestra) 
		{ document.getElementById("background").style.display="none";
		  document.getElementById(finestra).style.display="none"; }				
</script>

<body topmargin="0" leftmargin="0">

<div id="background" style="display: none;"></div>

<p align="center">

<input type="button" value="Mostra div 1" class="button-portalaccess" onmouseover="javascript:mostra('div1')" />
<input type="button" value="Mostra div 2" class="button-portalaccess" onclick="javascript:mostra('div2')"/></p>

<div id="div1" style="display: none;">
DIV 1
	<input type="button" value="X" onclick="javascript:nascondi('div1')" class="button-portalaccess" style="float: right"/></td>
</div>

<div id="div2" style="display: none">
	[img]../commons/images/check_ko.png[/img]

</p>
	<div id="div3" align="center">
		<table id="help" border="1" width="96%">
	<tr>
		<td id="help" align="center">DIV 2</td>
		<td id="help" width="5" align="center">
	</tr>
</div>
</body>