Div non viene mostrato in ff

**ciromonta** · 21-07-2008, 11:33

Ciao a tutti.. ho uno script che mostra la percentuale di avanzamento e al termine delle operazione una barra rossa (il div d1). Su IE tutto ok, ma su firefox non va.

Ecco il codice:

codice:

<?php
require("config.php");
?>
<html>
<head>
<!--
I get this script on http://www.js-examples.com
with a little changes ;-)
-->
<style type=text/css>
.d1 {     position: absolute;	 
     top:41;	 
     left:210;	 
     z-index:5;     
     color:black;     
     width:400;      
     heigth: 20; 	 
     clip:rect(0,400,21,0);	 
     background-color:red; 	 
     border-width:1;	 
     border-style:solid;
}
.d2 {
     position: absolute;
	 top:41;
	 left:210;
	 z-index:10;
     color:black;
     width:400; 
     heigth: 20; 
	 min-height:20;
	 clip:rect(0,400,21,0); 
	 background-color:white; 
	 border-width:1;
	 border-style:solid;
	}
.d3 {
     position: absolute;
	 top:40;
	 left:10;
	 z-index:1;
     color:black;
     width:200; 
     heigth: 20; 
	 background-color:#DDE8FF; 
	 border-width:0;
	 border-style:solid;
	}
.d4 {
     position: absolute;
	 top:40;
	 left:609;
	 z-index:1;
     color:black;
     width:20; 
     heigth: 20; 
	 background-color:#DDE8FF; 
	 border-width:0;
	 border-style:solid;
	}
</style>
<title>loader place</title></head>
<body onLoad="javascript:startIt()" bgcolor="#DDE8FF">
<div class=d1 id=d1 name=d1></div>
<div class=d2 id=d2 name=d2></div>
<div class=d3 id=d3 name=d3>
<form name="f_enota" method="post" action="">
	<input type="text" name="enota" value="<?=$Title_name?>" size="30">
</form>
</div>
<div class=d4 id=d4 name=d4>
<form name="procent" method="post" action="">
  <input type="text" name="perc" value="0" size="2">%
</form>
</div>
<script>
var count=0;
var MAXcount=100; // number of intervals
var width=400; // width of status bar.
function incOneIE() {
  var count= parseInt(procent.perc.value);
  var _i = parseInt(width / MAXcount) * (count);
  /*document.all.d1.style.zIndex=20;
  document.all.d1.style.clip="rect(0,"+_i+",20,0)";
  document.all.d1.style.width=_i;*/
  
  document.getElementById('d1').style.zIndex="40";
  document.getElementById('d1').style.clip="rect(0,"+_i+",20,0)";
  document.getElementById('d1').style.width=_i;
}
var doagain = null;
function stopIt() { if (doagain != null) clearInterval(doagain); }
function startIt() {
stopIt();
if (document.all)
  doagain = setInterval("incOneIE()",100); // 1/10 second interval
}

</script>
</body>
</html>

Sembra che il div d1 non prenda lo stile impostatorgli nel javascript. Come mai?

**artorius** · 21-07-2008, 11:44

Sai, mi stupisce che ti funzioni in Explorer...
Regola Fondamentale dei CSS:
Quando specifici un valore di posizionamento, grandezza, margini, bordi o spazio interno devi SEMPRE mettere l'unità di misura.

.d1 { position: absolute;
top:41;
left:210;
z-index:5;
color:black;
width:400;
heigth: 20;
clip:rect(0,400,21,0);
background-color:red;
border-width:1;
border-style:solid;
}

Di questa roba firefox interpreta:

.d1 {
background-color:red;
border-style:solid;
color:black;
position:absolute;
z-index:5;
}

Perchè top, left, width, height, border-width non hanno l'indicazione dell'unità di misura (per esempio Pixel, top:41px

È strano, perché ero convinto che anche Explorer 6 facesse attenzione a questo.

**ciromonta** · 21-07-2008, 11:48

Ok capito... ma anche quando imposto le proprietà in javascript devo dare l'unità di misura? se si, come faccio?

Grazie

**ciromonta** · 21-07-2008, 12:05

ho messo a tutte le proprietà le unità di misura, ma non funziona lo stesso..

**artorius** · 21-07-2008, 12:50

Posta il Codice modificato che provo a testarlo (CSS, HTML e JavaScript)

**ciromonta** · 21-07-2008, 12:53

Ecco il codice modificato

codice:

<?php
require("config.php");
?>
<html>
<head>
<!--
I get this script on http://www.js-examples.com
with a little changes ;-)
-->
<style type=text/css>
.d1 {     position: absolute;	 
     top:41px;	 
     left:210px;	 
     z-index:5;     
     color:black;     
     width:400px;      
     heigth: 20px; 	 
     clip:rect(0px,400px,21px,0px);	 
     background-color:red; 	 
     border-width:1px;	 
     border-style:solid;
}
.d2 {
     position: absolute;
	 top:41px;
	 left:210px;
	 z-index:10;
     color:black;
     width:400px; 
     heigth: 20px; 
	 min-height:20px;
	 clip:rect(0px,400px,21px,0px); 
	 background-color:white; 
	 border-width:1px;
	 border-style:solid;
	}
.d3 {
     position: absolute;
	 top:40px;
	 left:10px;
	 z-index:1;
     color:black;
     width:200px; 
     heigth: 20px; 
	 background-color:#DDE8FF; 
	 border-width:0px;
	 border-style:solid;
	}
.d4 {
     position: absolute;
	 top:40px;
	 left:609px;
	 z-index:1;
     color:black;
     width:20px; 
     heigth: 20px; 
	 background-color:#DDE8FF; 
	 border-width:0px;
	 border-style:solid;
	}
</style>
<title>loader place</title></head>
<body onLoad="javascript:startIt()" bgcolor="#DDE8FF">
<div class=d1 id=d1 name=d1></div>
<div class=d2 id=d2 name=d2></div>
<div class=d3 id=d3 name=d3>
<form name="f_enota" method="post" action="">
	<input type="text" name="enota" value="<?=$Title_name?>" size="30">
</form>
</div>
<div class=d4 id=d4 name=d4>
<form name="procent" method="post" action="">
  <input type="text" name="perc" value="0" size="2">%
</form>
</div>
<script>
var count=0;
var MAXcount=100; // number of intervals
var width=400; // width of status bar.
function incOneIE() {
  var count= parseInt(procent.perc.value);
  var _i = parseInt(width / MAXcount) * (count);
  /*document.all.d1.style.zIndex=20;
  document.all.d1.style.clip="rect(0,"+_i+",20,0)";
  document.all.d1.style.width=_i;*/
    
  document.getElementById('d1').style.zIndex="40";
  document.getElementById('d1').style.clip="rect(0px,"+_i+"px,20px,0px)";
  document.getElementById('d1').style.width=_i+"px";
   
  
}
var doagain = null;
function stopIt() { if (doagain != null) clearInterval(doagain); }
function startIt() {
stopIt();
if (document.all)
  doagain = setInterval("incOneIE()",100); // 1/10 second interval
}
</script>
</body>
</html>

**artorius** · 21-07-2008, 13:14

heigth?? height!

onLoad="java-script:startIt()" ??!?!?!?
onLoad="startIt()"...

E poi non c'è da stupirsi se non va:
if (document.all)

questo controllo fa andare la funzione solo per IE...

Codice PHP:


<?php

require("config.php");

?>

<html>

<head>

<!--

I get this script on [url]http://www.js-examples.com[/url]

with a little changes ;-)

-->

<style type=text/css>

.d1 {     position: absolute;     

     top:41px;     

     left:210px;     

     z-index:5;     

     color:black;     

     width:400px;      

     height: 20px;      

     clip:rect(0px,400px,21px,0px);     

     background-color:red;      

     border-width:1px;     

     border-style:solid;

}

.d2 {

     position: absolute;

     top:41px;

     left:210px;

     z-index:10;

     color:black;

     width:400px; 

     height: 20px; 

     min-height:20px;

     clip:rect(0px,400px,21px,0px); 

     background-color:white; 

     border-width:1px;

     border-style:solid;

    }

.d3 {

     position: absolute;

     top:40px;

     left:10px;

     z-index:1;

     color:black;

     width:200px; 

     height: 20px; 

     background-color:#DDE8FF; 

     border-width:0px;

     border-style:solid;

    }

.d4 {

     position: absolute;

     top:40px;

     left:609px;

     z-index:1;

     color:black;

     width:20px; 

     height: 20px; 

     background-color:#DDE8FF; 

     border-width:0px;

     border-style:solid;

    }

</style>

<script type="text/javascript">

var count=0;

var MAXcount=100; // number of intervals

var width=400; // width of status bar.

function incOneIE() {

  var count= parseInt(document.getElementsByName('perc')[0]);

  var _i = parseInt(width / MAXcount) * (count);

  /*document.all.d1.style.zIndex=20;

  document.all.d1.style.clip="rect(0,"+_i+",20,0)";

  document.all.d1.style.width=_i;*/

    

  document.getElementById('d1').style.zIndex="40";

  document.getElementById('d1').style.clip="rect(0px,"+_i+"px,20px,0px)";

  document.getElementById('d1').style.width=_i+"px";

   

  

}

var doagain = null;

function stopIt() { if (doagain != null) clearInterval(doagain); }

function startIt() {

stopIt();



  doagain = setInterval("incOneIE()",100); // 1/10 second interval

}

</script>

<title>loader place</title></head>

<body onLoad="startIt()" bgcolor="#DDE8FF">

<div class=d1 id=d1 name=d1></div>

<div class=d2 id=d2 name=d2></div>

<div class=d3 id=d3 name=d3>

<form name="f_enota" method="post" action="">

    <input type="text" name="enota" value="HAHAHA" size="30">

</form>

</div>

<div class=d4 id=d4 name=d4>

<form name="procent" method="post" action="">

  <input type="text" name="perc" value="0" size="2">%

</form>

</div>



</body>

</html>

ora dovrebbe andare.
Posso darti un consiglio? Scaricati Aptana, è un IDE con il correttore Javascript, PHP, e CSS. È molto utile per evitare questi problemi di sintassi

Discussione: Div non viene mostrato in ff

Strumenti discussione

Ricerca discussione

Visualizza

Div non viene mostrato in ff

Permessi di invio