2011-08-16 16 views
0

私は、各ボタンが右に浮かんだ画像であるメニューバーを持っています。 Safari、FF、Chromeでは完璧に見えますが、IE7ではボタンが細かくグループ化されていますが、他のブラウザより約50ピクセル低く表示されます(メニューバー外)。どのようにこれを修正するためのヒント?ありがとうございました!IE Float問題

http://jsfiddle.net/mE2b8/

マイCSS:

#menu { 
     width: 100%; 
     height: 58px; 
     background-color: #00653a; 
    } 

#menu_mid { 
    width: 823px; 
    height: 58px; 
    margin: 0px auto; 
    background-color: #00653a; 
} 

.menu_links { 
    float: right; 
    display: inline; 
} 

HTML:

<div id="menu"> 
     <div id="menu_mid"> 
     <img src="assets/img/menu_rrt.gif" alt="RRT"/> 
     <img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/> 
     </div> 
    </div> 
+0

どのバージョンのIE? – kenwarner

+0

おっと、私はそれが助けになると思います! IE7 – Vecta

+1

CSSに問題があります。 floatを使って:rightとdisplay:inlineは私の本に全く意味を持たない。表示を削除する:インラインまたは両方を削除する(デフォルトではimgはインライン要素である)。あなたの問題のより意味のある方法は、listを作成することです:ulメインid_midのidとliの各イメージ。画像によると、常に高さと幅をブラウザの安全な時間に設定してこれらの値を見つけ、ブラウザに必要な領域を即座に予約させることができます。 – mkk

答えて

2

問題は(ALT = "RRT" とまたはグラフィック)ロゴは持っていないということのようです定義された幅。私はimg要素にIDを追加して、それを左に浮かべました。あなたが探しているものと思われる:http://jsfiddle.net/mE2b8/3/

+0

浮動小数点:右はすでにディスプレイを設定しています:このブロックを削除できるブロック – mkk

+0

ありがとうございました! IEの複数のバージョン間で修正されました。 – Vecta