IE7〜ヘルプのコンテナを超えて拡張されるJavaScript Div！

Question

ライトポールの背景画像を備えた#lightpoleという空のdivがあります。ライトポールがコンテナの長さを伸ばすためにスクリプトを実行しています。 IE 7を除くほとんどのブラウザではすべてが見栄えがします。何らかの理由で、ライトポールがフッターを通り過ぎて拡大していることがわかりません。何か案は？

これがサイトです - http://greenlight.mybigcommerce.com/

これが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）;}）;

Divに関連するCSSの一部は次のとおりです。

#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;
}

更新 - これは、不適切に閉じたDivまたはクリアのフロートが原因である可能性がありますか？

Answer 1

私は類似した以前の問題に遭遇しましたが、それは$（document）.ready（function（）fireがロードされたすべての画像の前に発火しました。

Answer 2

JQueryの2つのバージョンを同時にロードしているように見えます：JQuery 1.3.2および1.5.2。私はまだあなたの問題をまだ固定していませんが、これらのいずれかを削除するのが最善です。

Answer 3

私の経験では、次のコードとは異なる方法で画像を反応させました。

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

vs

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

最初のものであるあなたが使用しているものは、あなたが発見したように、ほとんどのブラウザでうまく機能するスタイル属性に高さを追加します。

2番目のものは、高さ属性自体を設定し、より多くのブラウザで動作します。 IE7インスタンスはありませんが、これを試すことができます。