Блог

У меня есть серия фоновых изображений, которые должны исчезать и появляться на заднем плане. Это фоновое изображение появляется позади моего содержимого, расположено по центру и шире моего содержимого. Я не хочу, чтобы это изображение влияло на ширину моей страницы, поэтому для элементов контейнера div, ul или li ширина не установлена. Мне нужно определить, почему над моим фоновым изображением отображается белое левое поле. Это поле отображается независимо от того, насколько широко окно браузера, как показано моим «тестом» li. Проблема появляется во всех браузерах (протестировано: FF, Safari, Chrome, IE8) и не имеет ничего общего с javascript, используемым для поворота и затухания.

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

Ссылка на скриншот, показывающий проблему.

Живой пример проблемы.

HTML для этого:

 <div id="hdrHomeWrap">
<ul id="hdrHome">
    <li class="hdrHome1"></li>
    <li class="hdrHome2"></li>
    <li class="test"></li>
</ul>
  

CSS:

 #hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
    display: block;
    height: 400px;
    display:none; /* hide the items at first only */
    list-style:none;
    }
    #hdrHome li.hdrHome1 {
    background: url('images/hdr-home1.jpg') no-repeat top center;
    }
    #hdrHome li.hdrHome2 {
    background: url('images/hdr-home2.jpg') no-repeat top center;
    }
    #hdrHome li.hdrHome3 {
    background: url('images/hdr-home3.jpg') no-repeat top center;
    }
    #hdrHome li.test {
    background: #F00;
    }
  

Вы пробовали присвоить ul (#hdrHome) значение полей и отступов, равное 0?

В вашем CSS у вас есть #hdrHome #hdrHome li

Я предполагаю, что это ошибка. Либо у вас отсутствует «запятая» между ними.

Таким образом, это должно быть похоже #hdrHome, #hdrHome li вместо другого