I'm trying to put together a simple slideshow inside a bootstrap modal. I'm using Cycle2 for the image transitions. This is working beautifully in chrome and safari, including mobile devices. The issue is the images are not being constrained to the size of the modal window in firefox and IE. It works when I have just images, but when I wrap the images in div layers with text content, it blows up. I have 2 fiddles showing just images, and the second with content as well.
Just images: http://jsfiddle.net/GswZ2/1/ (works in all browsers)
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="cycle-slideshow">
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
<img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
<img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
With content & images: http://jsfiddle.net/aFmS9/4/ (doesn't work in IE & FF)
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="cycle-slideshow" data-slides="> div">
<div>
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
<div>
<img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
<p>ALorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
<div>
<img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
Thanks in advance for any help!
