I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected white left margin appearing over the background image. This margin persists regardless of the browser window width and seems unrelated to the javascript responsible for the image rotation and fading effects.
I suspect that I might be missing something simple here, so any guidance in the right direction would be greatly appreciated.
Click here to see a screenshot illustrating the problem.
For a live example of the issue, click here.
The HTML structure involved is as follows:
<div id="hdrHomeWrap">
<ul id="hdrHome">
<li class="hdrHome1"></li>
<li class="hdrHome2"></li>
<li class="test"></li>
</ul>
Here is the corresponding CSS used:
#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;
}