Salve a tutti,
ho un piccolo problema di compatibilità IE/FF di uno script che sto scrivendo. L'anomalia è piuttosto strana, e ho quindi deciso di sottoporre la cosa al forum, per vedere se ci sia qualcuno in grado di darmi una mano

Ma veniamo al dunque: lo script esegue uno spostamento di un div innestato in un'altro div (la solita applicazione che scorre una box dedicata alle news). Il movimento del div più interno è chiaramente verso l'alto, per mostrare tutte le news contenute. Su IE, nessun problema - lo script si comporta come mi aspetto.

Su Firefox, invece, il div interno si sposta verso il basso, quindi sempre fuori dalla visuale dell'utente: è possibile rendersene conto soltanto tracciando il top del div stesso. Questo è strano, perchè il codice JS non indica in nessun punto di eseguire un tale spostamento.

Dal momento che un esempio vale più delle parole, posto qui sotto il mio codice, nella speranza che qualcuno possa togliermi il dubbio.

Anticipatamente grazie

codice:
<html>
 <script type="text/javascript">

 var scroll_step = 1;
 var scroll_time = 80;

 var t;
 function init_news(){
   var parent = document.getElementById('news_container');
   parent.style.overflow  = 'hidden';

   var element = document.getElementById('news_content');
   element.style.cursor   = 'hand';
   element.style.position = 'relative';
   element.style.top      = parent.offsetHeight;

   if (element.attachEvent){
      element.attachEvent("onmouseover", stopInterval);
      element.attachEvent("onmouseout",  startInterval);
   }

   if (element.addEventListener){
      element.addEventListener("mouseover",stopInterval,false);
      element.addEventListener("mouseout",startInterval,false);
   }

   startInterval();
 }

 function stopInterval(){
   clearInterval(t);
 }

 function startInterval(){
   t = setInterval("scroll_news()",scroll_time);
 }

 function scroll_news(){
   var parent = document.getElementById('news_container');
   var element = document.getElementById('news_content');

   var news_y = element.offsetTop - scroll_step;

   if ( (news_y + element.offsetHeight) > 0){
      element.style.top = news_y;
   }
   else {
      element.style.top = parent.offsetHeight;
   }

   document.getElementById('label').innerHTML = "Coord.Y: " + element.style.top + ";";   
 }

 </script>

 <style>
  #news_container{
    width: 220px;
    overflow: auto;
    height: 180px;
    border: 2px dashed blue;
  }

  #news_content{
    font-family: Calibri;
    font-size: 13px;
    text-align: justify;
    padding: 5px 5px 5px 5px;
    width: 220px;
    overflow: none;
    border: 1px dotted gray;
  }

 </style>

<body onLoad="javascript:init_news();">

<div id="label"></div>
<div id="news_container">
   <div id="news_content">
     News 1

     Blahblahblah
   </div>
</div>

</body>
</html>