У меня есть серия фоновых изображений, которые должны постепенно исчезать и появляться на заднем плане.Это фоновое изображение появляется за моим контентом, центрируется и шире моего контента.Я не хочу, чтобы это изображение влияло на ширину моей страницы, поэтому для элементов 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;
}