JavaScript div extendiendo más allá del contenedor en IE7 ~ ¡Ayuda!

Question

Tengo un Div vacío llamado #lightpole que tiene una imagen de fondo de un Pole de Lightpole. Estoy ejecutando un script para que el Pole Light se extienda la longitud del contenedor. Todo se ve bien en la mayoría de los navegadores, excepto IE 7. Por alguna razón, no puedo entender que el Pole de Lights se está expandiendo mucho más allá del pie de página. ¿Algunas ideas?

Aquí está el sitio - http://greenlight.mybigcommerce.com/

Aquí está el JavaScript:

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

$ (documento) .Ready (function () {var contenedor_height = $ ('#contenedor'). height (); $ ('#lightpole'). Height (contenedor_height);});

Aquí están algunos de los CSS relacionados con los 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;
}

ACTUALIZACIÓN: ¿podría esto ser causado por un DIV inadecuado o una flotación que no se baje?

Answer 1

Encontré un problema anterior que era similar y se debía a $ (documento) .Ready (function () disparando antes de todas las imágenes cargadas. Intente usar $ (ventana) .load (function () {

Answer 2

Parece cargar 2 versiones de jQuery al mismo tiempo: jQuery 1.3.2 y 1.5.2. Aunque todavía no he fijado su problema en eso, es probablemente mejor eliminar uno de estos.

Answer 3

En mi experiencia, he tenido imágenes reaccionadas de manera diferente con las siguientes piezas de código:

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

VS

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

El primero, el que está utilizando, agrega la altura al atributo de estilo, que como ha descubierto, funciona bien en la mayoría de los navegadores.

El segundo establece el atributo de altura y funcionará en más navegadores. No tengo una instancia de IE7, pero podrías probar esto.