jquery cycle plugin in IE
The jquery cycle plugin I have incorporated into my website does not work for IE - works fine in FF and Safari - but the demo page where I downloaded the cycle program works fine in IE for me, so I know it's my stuff that is broken. Can anyone help me figure out what is wrong with my code below? My pictures spill out all over the page. I've tried differnt options instead of "fade" for the cycle plugin, but it still doesn't work.
Here is my index.php:
-
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"> </script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/ui.tabs.pack.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/application.js"></script>
..... and later on in index.php there is:
-
<div id = "headingfade" class="pics">
<img src=js/easyslide/banner1.jpg>
<img src=js/easyslide/banner2.jpg>
<img src=js/easyslide/banner3.jpg>
<img src=js/easyslide/banner4.jpg>
<img src=js/easyslide/banner5.jpg>
<img src=js/easyslide/banner6.jpg>
</div>
Here is my application.js file:
-
$('#headingfade').cycle({
fx: 'fade',
speed: 'normal',
timeout: 6000,
containerheight: '150px',
next: '#next2',
prev: '#prev2'
});
and my css for this portion
-
.pics {
height: 150px;
width: 100%;
padding: 0;
margin:0;
margin-top: -9px;
margin-bottom: 22px;
}
.pics img {
padding: 5px;
border:1px solid #ccc;
background-color: #eee;
width:99%;
height: 150px;
top: 0;
left: 0;
opacity:.75;
}
As I stated earlier, is all works beautifully in FF and Safari, but in IE the pics display on the page one right after the other. Can anyone see what I have done wrong?