初心者のCSSトラブル - IEでは表示されるが、ChromeやFireFoxでは表示されない

Question

自分自身の責任でなければならないことは分かっているが、私が間違っていたことは見ていない。 ChromeとFireFoxで予想どおりに表示されます。 IE9で失敗します。私はW3C CSSバリデーターを使用し、それはきれいに戻った。

すべて私は、同じ行にテキスト（左に水平に整列、垂直に一番下に整列）とイメージ（バナーの追加）を入れたいです。

<div id="header"> 
    <span id="logo">MyCoolLogoText!</span> 
    <img id="ad1" src="banner.jpg">  
</div> 

私はこれで苦労してきたように私のCSSが長く得ているが、それは

現在

#logo { 
width:507px; 
height:65px; 
display:inline; 
float:left; 
text-align:left;  
vertical-align: text-bottom; 
color:white; 
margin:0; 
padding:0; 
background-color:rgb(77,00,00); 
} 

#ad1 { 
float:left; 
display:inline; 
width:468px; 
height:65px; 
margin:0; 
padding:0; 
} 
#header 
{ 
    width:975px;  
    height:75px;  
    margin:0; 
    padding:0;  
} 

であるInternet Explorerが最初の行にスパンを配置し、次の行の画像です。どちらかの幅を小さくすると、どちらも最上行に表示されます。私はIEがある種のマージンやパディングを追加していると仮定しています。しかし、私はそれを言わないようにしました。

ご協力いただければ幸いです。

編集：私はそれがmarginまたはpaddingを追加するので、あなたが持っていることを確認することができ＃ヘッダー

Answer 1

のためのスタイリング情報を追加しました：

body { 
    margin: 0; 
    padding: 0; 
} 

しかし、それはちょうどあなたのウィンドウ幅かもしれません。オブジェクトを浮動させ、幅を固定しているので、ブラウザーウィンドウの幅を縮小するだけで、どのブラウザーでもIE9で見られるのと同じ効果を得ることができます。それが浮動小数点の仕組みの性質です。それを解決するには、この（私はあなたの現在のマージン、パディング、ボーダーの設定で何を参照してくださいオフに基づいて）実行します。

#header { 
    min-width: 975px; /* the width of your two floated elements */ 
} 

をあなたはmin-widthの代わりにwidthを使用することができます。

編集：さて、あなたはヘッダーの幅を持っていました。 imgタグの構文が正しくないことがわかりました。 <img id="ad1" src="banner.jpg">がありますが、閉じスラッシュ<img id="ad1" src="banner.jpg" />がありません。私はそれが問題だとは思っていませんが、一方で、ブラウザは無効なコードで面白いことをすることができます。

Answer 2

＃ad1をインラインブロックとして表示し、右に浮かべてみてください。また、泡を囲むようにしたい場合は、#headerに隠されたオーバーフローを叩きます（オーバーフローさせる必要がない限り）。