Javascript changing marginTop attribute not working in Firefox for XHTML 1.0 Transitional

Question

Hi all,

Yesterday I moved CultureRater.com across to XHTML 1.0 Transitional and while the javascript below works in Safari and Chrome, it's not working in Firefox. Anyone got any ideas? If u need a better impression of the problem then visit the site in FF and go here and try pressing the white arrow on the right (the genres should change).

var i=-2;
function film_button_right() {
  i--;
  document.all.nav_genres.style.marginTop=i*48 + 'px';
  document.all.left_categories_arrow.style.display="block";
  if(i==-3){
    document.all.right_categories_arrow.style.display="none";
  }
}
function film_button_left() {
  i++;
  document.all.nav_genres.style.marginTop=i*48 + 'px';
  document.all.right_categories_arrow.style.display="block";
  if(i==0){
    document.all.left_categories_arrow.style.display="none";
  }
}

Thanks for any help in advance. Theo.

Answer 1

document.all isn't supported by Firefox. Use document.getElementById() instead.

var i=-2; 
function film_button_right() { 
  i--; 
  document.getElementById("nav_genres").style.marginTop=i*48 + 'px'; 
  document.getElementById("left_categories_arrow").style.display="block"; 
  if(i==-3){ 
    document.getElementById("right_categories_arrow").style.display="none"; 
  } 
} 
function film_button_left() { 
  i++; 
  document.getElementById("nav_genres").style.marginTop=i*48 + 'px'; 
  document.getElementById("right_categories_arrow").style.display="block"; 
  if(i==0){ 
    document.getElementById("left_categories_arrow").style.display="none"; 
  } 
} 

Answer 2

Accessing page elements using the document.all array is a non-standard Microsoft feature, which Firefox does not support. You should use the document.getElementById function instead.