jQuery Cycle2 images not showing in Firefox

Question

I created a cycle 2 slideshow here and it works fine in Chrome and Safari, but the images don't show up in Firefox.

Here is the html:

<article id="slider" >
<div class="slide-projector container">
<div class="slide-nav">
<span id="prev"> Prev</span>
<span id="next"> Next</span>
</div>     
<div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-prev="#prev" data-cycle-next="#next">


<div class="slide">
<div class="slide-link">
<a href="/estimate/">Request an Estimate</a>
</div>
<img src="/images/uploads/placeholder_slider_01.png" alt="Coastal Moving - Request an Estimate"  />
</div>

<div class="slide">
<div class="slide-link">
<a href="/planning-your-move/">Planning Your Move</a>
</div>
<img src="/images/uploads/TipstoMove.jpg" alt="Plan Your Move"  />
</div>

<div class="slide">
<div class="slide-link">
<a href="/services/strorage">Storage</a>
</div>
<img src="/images/uploads/storage1.jpg" alt="Need Storage?"  />
</div>


</div><!-- end slideshow -->
</div><!-- end slide-projector -->
</article>

Here is the CSS

.slide-projector { 
    max-width: 960px; 
    max-height: 322px; 
    position: relative; 
    border-bottom: 5px solid #c32538;
}


.cycle-slideshow { 
    position: relative;
    max-width: 960px; 
    height: 322px;  
    overflow: hidden;
}

.slide { max-width: 960px; }

.slide > img { 
    width: 100%; 
    position: absolute; 
    top: 0; left: 0; 
}

.slide-nav { 
    position: absolute;
    top: 5px;
    left: 10px;
    width: 80px; 
    height: 40px; 
    background: #c32538; 
    padding: 5px;
    z-index: 500; 
    border-right: 1px solid white;
}

span#prev { 
    width: 37px; 
    height: 36px; 
    display: block;
    float: left;
    padding-right: 5px;
    text-indent: -9999px;
    background: url(/resources/imgs/arrow_right.png) no-repeat left top; }

span#next { 
    width: 37px; 
    height: 36px; 
    background: url(/resources/imgs/arrow_left.png) no-repeat left top; 
    text-indent: -9999px;
    display: block;
    float: left;
    }

.slide-link { 
    width: 200px; 
    height: 30px; 
    position: absolute;
    top: 5px;
    left: 100px;
    background: #c32538; 
    padding: 10px; 
    z-index: 300;
}

.slide-link a:link,
.slide-link a:visited { color: #fff; text-decoration: none; }   

I would appreciate any assistance in getting this to display correctly in Firefox.

Thank you.

Answer 1

Adding width:100% to .slide seemed to fix the problem for me in Firefox 29. With max-width:960px this means the slide will be as wide as possible whilst never exceeding 960px. Hope that helps :)