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?
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(){