I'm designing an infinite carosel slideshow. When the slideshow loads, i take the last image and prepend it before the first one, in case the user press the previous button first. A simplified idea of my markup is:


<div id="container">
<div id="slideshow">
<div id="slider">
<div class="slide">
yadda yadda slide 1
</div>
<div class="slide">
yadda yadda slide 2
</div>
<div class="slide">
yadda yadda slide 3
</div>
</div>
</div>
</div>


each div.slide is floated left within div#slider, with the order being slide 3, slide 1 then slide2. However, since I want to display slide 1 first, I use jQuery and set a marginLeft of -(width of slide). This works properly in all the other browsers and displays slide 1 first, except IE. Here, it still displays slide 3 first and ignores my marignLeft code.
Is this due to floating the elements? And is there a work around? Thanks!