IE7でウェブサイトが正しく表示されないのですか？

Question

私のウェブサイト：geek.designbracket.com（Drupal 6.10）はIE7では正しく表示されません。主な問題は、ヘッダーとロゴのプライマリリンクにあります。 サイトはFireFoxとChromeで必要に応じて表示されます。

主な問題：#Page divには、IEの上下に大きなロゴが表示されます。

基本的に私はdiv： ＃この機能の中で相対的に配置されているプラ​​イマリメニュー+検索+ロゴをカプセル化した#utilitiesを使用しています。私はFFとChromeの要素が一貫して整列するように、これを行いました。

このdivの下には、サイドバーと内容を保持する#Page divがあります。私は、アライメントがあまりにもそれのようにIEで異なる解像度のための一貫性のあるとどまることを主なリンク、ロゴおよびそのような方法で検索ボックスを揃える助けてください

#utilities { 
margin:0 auto; 
padding:0 10px 15px; 
width:990px; 
} 

#utilities #plinks { /*plinks is for the primary menu*/ 
float:left; 
left:60px; 
position:relative; 
width:900px; 
} 

#utilities form { /* this div determines the position of the search box */ 
position:relative; 
top:10px; 
z-index:1; 
} 


#logo { 
float:left; 
left:70px; 
position:relative; 
} 

：関連のdiv FR

CSSは下の通りですfr FFされています。

ありがとうございました。

Answer 1

を（自分が...今それをテストすることはできません）IE6のためのいくつかの修正がされています。それはie7の問題のいくつかを修正する必要があります

ロゴは右端にあります。

style.css #logo{clear:left;} 

あなたの左の列には、あなたの「新しいコメントを追加します」と、切断され、「続きを読む」をdouble-margin bug

layout.css #primary {display:inline;} 

を持っています。問題は、どちらも高さのない浮動要素であることです。あなたは、多くのマージン/パディングをさまざまな要素に入れて整列させ、通常はブラウザ間でうまく動作しません。私はClearing Floatsと読んで最初からその部分を開始する必要があると思います。

Answer 2

クイック提案：明確に配置するようにしてみてください：あなたの#logoブロックに残っ文をここで

Answer 3

少しでもOTですが、次回IEがハンマーに遭遇したときにはpositioniseverythingが役に立ちます。