Internet Explorer Missing Divs Issues...

Question

I am having some serious trouble with missing DIVs under Internet Explorer and I cannot seem to get them to show up.

The website is http://www.andstones.ca. And it looks great, and functions perfect in most of the other required test browsers, but something about its appearance in IE7 is off.

The issues are related to the #righty div and the .items div. This is a large full width scrollable that sits incide of a .scrollable div and the controls allow for fluid motion back and forth.

The scrollable uses a jquery slider, and several .item divs floated with negative margins to appear.

<div id="lefty" style="width: 500px; position: relative; float: left; height: 431px; z-index: 100; background: url(&quot;http://andstones.ca/wp-content/uploads/2010/06/overlay_left.png&amp;quot;) repeat scroll 0% 0% transparent;"></div>

<div class="items" style="left: -1800px;">

... items

</div> 

<div id="righty" style="width: 500px; position: relative; height: 431px; z-index: 100; background: url(&quot;http://andstones.ca/wp-content/uploads/2010/06/overlay_right.png&amp;quot;) repeat scroll 0% 0% transparent; float: right;" id="righty"></div>

The majority of the custom styles (that are not inline) are contained within the following stylesheet:

http://www.andstones.ca/wp-content/themes/sticksandstones/library/media/css/screen.css

Specifically, I think the troublesome CSS is below:

#main {
height: 461px;
overflow: hidden;
}

#middle {
margin: 0 auto;
background-image:url("../images/scrollable_overlay.png");
background-position:center center;
background-repeat:no-repeat;
height:431px;
z-index: 999;
    }

    .scrollable {
height:420px;
/* width: 1795px; */
width: 1795px;
float: none;
margin-left: auto;
margin-right: auto;
position: relative;
    z-index: -10;
    overflow: hidden;
    clear: both;
margin-left: -898px;
left: 50%;
    }