style.display cross browser problem

Take a look at this page. [url]http://tempsite.texwipe.com/test/[/url]

This is my script:

[code=php]function isString(a) {
return typeof a == ‘string’;
}

function show(n){
//Get number of layers
//needs to be an integer
nLayers = parseInt(document.getElementById(“fCount”).value);

// Sets all back to normal
for(i=1;i<=nLayers;i++){
document.getElementById(“Layer”+i).style.display = ‘none’;
document.getElementById(“Layer”+i+”Img”).style.display = ‘none’;
document.getElementById(“Layer”+i+”Link”).style.color = ‘#000000’;
}
document.getElementById(“LayerAllImg”).style.display = ‘none’;
document.getElementById(“LayerAllLink”).style.color = ‘#000000’;

// Sets n layer options
if (isString(n)){
for(i=1;i<=nLayers;i++){
document.getElementById(“Layer”+i).style.display = ‘block’;
}
} else {
document.getElementById(“Layer”+n).style.display = ‘block’;
}
document.getElementById(“Layer”+n+”Img”).style.display = ‘block’;
document.getElementById(“Layer”+n+”Link”).style.color = ‘#4C4C4C’;
document.getElementById(“Layer”+n+”Img”).src = ‘/images/arrow_grey.gif’;

document.getElementById(“LayerID”).value = n.toString();
document.getElementById(“LayerDspStyle”).value = document.getElementById(“Layer”+n+”Img”).style.display;
document.getElementById(“LayerStyleColor”).value = document.getElementById(“Layer”+n+”Link”).style.color;
document.getElementById(“LayerImgSource”).value = document.getElementById(“Layer”+n+”Img”).src;
}[/code]

It works flawlessly in IE, but in Firefox not so much. Here is the situation. I am using the javascript property style.display to show and hide some div layers. These layer ids are Layer1, Layer2, Layer3, etc. Each link on the left controls what is shown or hidden. When they are clicked, the corresponding layer is displayerd. “All products” displays all available layers.

As I said this is not a problem in IE but in Firefox almost consistently I have 2 problems. Do the following to reproduce them.

Overlapping text:
1. Click any of the menu items on the right (except All products). The layer will be displayed.
2. Without refreshing the page, click the All Products. All of the layers are displayed but they overlap the footer.

All of layer not hidden:
1. Refresh the page.
2. Click All Products. This will not overlap the footer as above.
3. Click any other menu item. The layer is not shrunk back to its original size.
4. Click a few more menu items (except All products) and the layer will eventually shrink back to the correct size.

Now as I said this works in IE. Please help me figure out the Firefox issue.

Thank you!
Brian

Also in #JavaScript _↴