I'm trying to implement a slideshow like this one: http://biggayicecreamtruck.com but for the life of me I can't figure out why their code works and mine doesn't. My page is here: http://oaxacankitchenmobile.com. It's not that IE isn't styling it, the images just aren't showing up at all. Like I said, the slideshow works fine in FF/Safari/Chrome. Here's my code on the main page
<div id="slideshow">
<ul>
<li><img title="Picture 1" alt="Picture 1" src="images/slideshow1.jpg" />
<div class="text-bg"></div>
<div class="text">
<h2>La Flor de Piña</h2>
</div>
</li>
<li><img title="Picture 2" alt="Picture 2" src="images/slideshow2.jpg" />
<div class="text-bg"></div>
<div class="text">
<h2>Agua Frescas</h2>
</div>
</li>
...and so on...
I don't think there's anything wrong with the way I'm listing the images, since it's exactly the same as the other site. jQuery is loading fine, since it works on those other browsers. I'm assuming that I'm initializing the code correctly again, since it works on other browsers. The jCarousellite code I'm using is exactly the same as the one from the other site.
I'm thinking that my problem has to be with my CSS, but there's where I'm stuck. I can't figure out what I need to change to get the slide show to appear at all in IE. Can anyone help me? Here's the relevant CSS:
/*SLIDESHOW*/
#slideshow { width: 900px; height: 350px; border: 1px solid #362626; display: none; margin: 0 auto 28px; }
#slideshow ul { list-style-type: none; margin: 0; }
#slideshow img { width: 900px; height: 350px; }
#slideshow li { width: 900px; height: 350px; position: relative; }
#slideshow .text-bg { position: absolute; bottom: 0; left: 0; width: 900px; height: 58px; background-color: #000; }
#slideshow .text { position: absolute; bottom: 18px; left: 18px; width: 900px; text-align: left; }
#slideshow h2 { display: inline; font-size: 18px; line-height: 24px; color: white; font-family: "Baskerville Old Face", serif; }
#slideshow h2 a:hover { text-decoration: none; }
#slideshow p { display: inline; font-size: 13px; margin-left: 7px; }
One other bit adding to my frustration: my jQuery .load calls aren't working on this page, either. So, it appears that no jQuery scripts are working on this page.