javascript div extending beyond container in IE7 ~ help!

Question

I have an empty div called #lightPole that has a background image of a lightpole. I am running a script to make the lightpole extend the length of the container. Everything looks good in most browsers except IE 7. For some reason that I can't figure out the lightpole is expanding way past the footer. Any ideas?

here's the site - http://greenlight.mybigcommerce.com/

here's the javascript:

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

$(document).ready(function() { var Container_height = $('#Container').height(); $('#lightPole').height(Container_height); });

Here's some of the css related to the divs:

#Container {
height:auto;
width: 1100px;
margin: 0 auto;
background-image:url(../images/containerBackground_2.png)!important; /*this is a hack for IE6 to choose between background images*/
background-image:url(../images/containerBackgroundIE6.png);
background-position: center top;
overflow:hidden;
clear:both;
}


#Outer {
clear: both;
height: auto;
margin: 0 0 0 15px;
overflow: hidden;
padding: 0;
width: auto;

}

#Wrapper {    
clear: both;
float: left;
height: auto;
margin:9px 0 0 43px;
min-height: 350px;/***added to keep footer from hitting light on nav light pole**/
padding: 0;
width: 990px;

}


#LayoutColumn1{
 float: left;
height: 100%;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
position: relative;
z-index: 88;
clear:both;
}

#lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
/*min-height: 320px;*/
overflow: hidden;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
 display: inline-block;
float: left;
}

Update - Could this be caused by an improperly closed div or a float not clearing?

Answer 1

I encountered a previous problem that was similiar and it was due to $(document).ready(function() firing before all of the images loaded. try using $(window).load(function(){

Answer 2

You appear to load 2 versions of jquery at the same time: jquery 1.3.2 and 1.5.2. Although I haven't pinned your problem on that just yet, it's probaly best to remove one of these.

Answer 3

In my experience, I have had images react differently with the following pieces of code:

$('#myimage').height(200);

vs

$('#myimage').attr('height',200);

The first one, the one that you are using, adds the height to the style attribute, which as you have discovered, works well in MOST browsers.

The second one sets the height attribute itself, and will work in more browsers. I don't have an IE7 instance, but you could try this.