Problème CSS avec firefox

Bonjour,

j'ai un problème d'affichage entre firefox et IE! sous IE ca marche nickel mais pour sous firefox!

le problème est l'affichage de fond! ca devrait être un noir un peu transparant! mais sous firefox le fond reste la page web actuel!

je vous mets le css ainsi que mon script JS, qui va avec! je sais pas quoi modifier pour avoir le background en noir sous firefox! si qqu'un peut m'aider!

css:
#diapo_screen {
top: 0;
left: 0;
background-color: #000000;
position: absolute;
filter: alpha(opacity=80);
opacity: 0.8;
margin: 0;
width: 100%;
z-index: 1;
cursor:crosshair;
}

#container {
position: absolute;
margin: 0;
padding: 0;
filter: alpha(opacity=100);
opacity: 1;
z-index: 6;
}

#img_container {
background-color: #FFFFFF;
margin: 0;
padding: 0;
z-index: 3;
position:relative;
top:50px;
left:50px;
filter: alpha(opacity=100);
opacity: 1;
cursor:default;
}

Fonction background JS:
function diapo_screen()
{
//background
var back_ground = document.createElement('a');
back_ground.setAttribute('id', 'diapo_screen');
back_ground.title = 'Close the diaporama';

//close diapo
back_ground.onclick = function()
{
diapo_close();
return false;
}

//container for image and commands
var container = document.createElement('div');
container.setAttribute('id', 'container');
container.style.width = '400px';
container.style.height = '350px';

//commands
obj_play = document.createElement('img');
obj_play.setAttribute('id', 'diapo_play');
obj_play.setAttribute('src', 'Images/play.png');
obj_play.onclick = diapo_play;
obj_play.style.display = 'block';
container.appendChild(obj_play);
obj_pause = document.createElement('img');
obj_pause.setAttribute('id', 'diapo_pause');
obj_pause.setAttribute('src', 'Images/pause.png');
obj_pause.onclick = diapo_pause;
obj_pause.style.display = 'block';
container.appendChild(obj_pause);
obj_forward = document.createElement('img');
obj_forward.setAttribute('id', 'diapo_forward');
obj_forward.setAttribute('src', 'Images/forward.png');
obj_forward.onclick = diapo_forward;
obj_forward.style.display = 'block';
container.appendChild(obj_forward);
obj_previous = document.createElement('img');
obj_previous.setAttribute('id', 'diapo_previous');
obj_previous.setAttribute('src', 'Images/previous.png');
obj_previous.onclick = diapo_previous;
obj_previous.style.display = 'block';
container.appendChild(obj_previous);

//creation of container for image
var diap = document.createElement('div');
diap.setAttribute('id', 'img_container');
diap.style.width = '300px';
diap.style.height = '300px';
container.appendChild(diap);

//positioning of the container
array_PageSize = getPageSize();
array_PageScroll = getPageScroll();
back_ground.style.height = parseInt(parseFloat(array_PageSize[1]));

container.style.left = parseInt((parseFloat(array_PageSize[0])/2)-200)+'px';
container.style.top = parseInt(parseFloat(array_PageScroll[1])+(parseFloat(array_PageSize[3])/2)-175)+'px';

diap.style.left = 50+'px';
diap.style.top = 50+'px';
obj_play.style.left = 50+'px';
obj_play.style.top = 50+'px';
obj_pause.style.left = 50+'px';
obj_pause.style.top = 50+'px';
obj_forward.style.left = 300+'px';
obj_forward.style.top = 50+'px';
obj_previous.style.left = 50+'px';
obj_previous.style.top = 50+'px';


obj_body = document.getElementsByTagName('body').item(0);
obj_body.appendChild(back_ground);
obj_body.appendChild(container);
}