Div a pieno schermo - Problema Firefox

**Trotttola** · 13-01-2012, 11:39

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>

**mrseo88** · 13-01-2012, 14:06

basta che dai al body margin:0;

**Trotttola** · 13-01-2012, 17:00

Ho moficato come mi ha consigliato così:

( riporto solo la parte comodificata )

Prima:

codice:

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

Dopo:

codice:

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

Ma come puoi notare dall'immagine qui sotto non è cambiato nulla. il problema rimane...

Uploaded with ImageShack.us

**Trotttola** · 16-01-2012, 14:29

Mi scuso per l'insistenza. Qualcuno ha altri suggerimenti in merito?

Vi ringrazio.

**ResianTaxidrive** · 16-01-2012, 14:47

Prova ad aggiungere anche
Div {margin:0}

**ac_socmel** · 16-01-2012, 15:59

il codice andrebbe corretto quà e là
comunque quello che manca è l'azzeramento di margin e padding di p
che è il primo elemento della pagina

**Trotttola** · 16-01-2012, 22:17

Vi ringrazio infinitamente tutti per l'aiuto.

Effettivamente inserendo il p margin: 0 tutto è andato a posto.

Come scrivevo prima il tutto è una prova quindi ci sono sicuramente altri errori che correggerò man mano.

Discussione: Div a pieno schermo - Problema Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Div a pieno schermo - Problema Firefox

Permessi di invio