Javascript DIV Background issue

I currently have a web site in which I am using some Javascript to change the Background of a DIV.

The DIV is defined as follows :

<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
   <div id="outerscreen">
            <div id="mainscreen">
            </div>
 开发者_开发百科   </div>
</td>

and the Javascript I am using is as follows :

var docEl = document.getElementById('outerscreen');
            docEl.style.backgroundImage = "url('pics/intro.gif')";

My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.

Can anyone shed any light on what the problem is and how I might be able to resovle this.

Thanks in advance Chris

Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.

1. Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
2. set overflow: hidden on #outerscreen

This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.

Although i don't recommend using a table for your layout here is a solution that works better and gives you more control

<style type='text/css'>
   .outerCell {
     width: 750px; height: 300px; background-color: Black; border: 0px;
   }

   .outerScreen {
      background-image : url('pics/intro.gif');
      height: 300px;
   }
</style>

<td class='outerCell' >
   <div id="outerscreen">
            <div id="mainscreen">
            </div>
    </div>
</td>

now the javascript:

var docEl = document.getElementById('outerscreen');
 docEl.className = "outerScreen";

Having your style defined in a css is more flexible when you want to make changes, code seperation is always good

I think the problem is with the '

try:

docEl.style.backgroundImage = "url(pics/intro.gif)";