Using jQuery Cycle plugin to move through DIV tags

Question

I'm redesigning our site and one page I'm trying to build in a rotating carousel of information on the top of the page. It's having no issues on Firefox, but the CSS is all messed up in IE (no background in IE8, no background and page is all messed up in IE8 with IE& compatability turned on). Page is http://redesign.riversidecg.com/services.asp

Here's the cycle call:

<script type="text/javascript"> 
$(document).ready(function() {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 2500,
    pause: 1,
    pager: '#nav'
  });
});
</script>

And the code in the page:

<div id="content">
  <div class="slideshow">
    <div><!--#include virtual="/inc/content-div/1.inc.asp"--></div>
    <div><!--#include virtual="/inc/content-div/2.inc.asp"--></div>
    <div><!--#include virtual="/inc/content-div/3.inc.asp"--></div>
    <div><!--#include virtual="/inc/content-div/4.inc.asp"--></div>
  </div>
  <div id="nav" class="nav"></div>
</div>

Thanks! Joe

Answer 1

Do you explicitly give the div tags a width & a height in your CSS?

<div><!--#include virtual="/inc/content-div/1.inc.asp"--></div>
<div><!--#include virtual="/inc/content-div/2.inc.asp"--></div>
<div><!--#include virtual="/inc/content-div/3.inc.asp"--></div>
<div><!--#include virtual="/inc/content-div/4.inc.asp"--></div>

I would suggest giving them each a width and height in your CSS, if you didn't specify that in your external sheet already. I see there are inline styles applied to them if I look at the code, but I'm not sure if they are specified by jQuery.Cycle or by you?