Javascript DIV Фоновая проблема

Question

У меня в настоящее время есть веб-сайт, на котором я использую некоторый Javascript для изменения фона DIV.

DIV определяется следующим образом:

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

и Javascript IЯ использую следующее:

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

Моя проблема возникает, когда эта функция отлично работает в IE, но не работает для Chrome, FF и Safari.

Может ли кто-нибудь пролить свет на то, в чем заключается проблема и как я могу ее решить.

Заранее спасибо, Крис

Answer 1

Предполагая, что у вас есть некоторый контент внутри #mainscreen, наиболее вероятное объяснение состоит в том, что #mainscreen является плавающим, поэтому он не используется при расчете высоты его родителя, но у вас есть Doctype (или вообще не имеет Doctype ) который запускает режим Quirks в Internet Explorer, поэтому он не позволяет поплавкам проваливаться сквозь дно своих контейнеров.

1. Добавить Doctype, который запускает стандартный режим (чтобы IE был более совместим с другими браузерами)
2. set overflow: hidden on # outerscreen

Answer 2

Думаю, проблема в попытке

:

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

Answer 3

Хотя я не рекомендую использовать таблицу для вашего макета, здесь есть решение, которое работает лучше и дает вам больше контроля

<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>

Теперь JavaScript:

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

Определение стиля в CSS более гибко, когда вы хотите внести изменения, разделение кода всегда хорошо

Answer 4

Это работает в FF4 и Opera10.Вам нужно указать высоту и ширину <div id="outerscreen"> или иметь внутри какой-то контент, который занимает область экрана, чтобы этот эффект был видимым.