firefox とie6 でのbackground height wi

質問

firefox とie6 でのbackground height width表示の違い
ホームページ作成しています。
初心者です。
globalnavi というdiv のなかに　globalnavi li をfloat-rightで横並びにしました。
width 800px height 30px にしたいのですが
IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！

#globalNavi{
background-image:url(../menubar.png);
width:790px;
height:30px;

font-size:14px;
color: #1C1D21;
text-align:center;
}
#globalNavi li{

float:right;
overflow:hidden;
width:80px;
height:30px;
list-style-type:none;
text-align:center;
color: #1C1D21;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #999;
line-height:0;
}
#globalNavi a{
width:80px;
　　height:30px;
display:block;
text-align:center;

line-height:normal;

}
#globalNavi a:hover{
width:80px;
height:30px;
background-position: 0 -80px;
background-color:#B7D68D;
text-decoration: none;

回答No.2

metametamu · ベストアンサー

＞globalnavi要素の下のコンテンツの幅
これはもしかして余白のことでしょうか？
教本がどのようになっているかはわかりませんが、デフォルトのスタイルはリセットされましたか？
ul要素にはmargin:0;とpadding:0;を指定しなければブラウザのスタイルが適用されて余白ができてしまいます。

＞何故line heightが
line-height:0;を指定したあとにline-height:normal;を指定されていたので、トリッキーだなと思ったからでしょうか。普通はline-height:0;はあまり目にしません。

ソースに関してですが、li要素のoverflow:hidden;はたぶん必要ないと思います。
また、質問時のソースではborderでナビゲーションメニューの区切りを作られていますが、おそらくこれもズレの原因になっています。
widthとpaddingまたはborderを一緒に指定するとIEでのズレの原因になります。
以下のページを一読されるとよいと思います。
http://adp.daa.jp/archives/000265.html
今回の場合はli要素内のa要素に対してborderを指定することでこれを回避できそうです。
それとwidthとheightを指定した要素の子要素でまた同じ値のwidthとheightを指定するとIEは時々変な挙動になる(？)ので、できるだけ削れるところは削るほうがいいと思います。

#globalNavi{
width: 800px;
height: 30px;
margin: 0;
padding: 0;
font-size: 14px;
background: url(../menubar.png) no-repeat 0 0;
}

#globalNavi li{
float:right;
width:80px;
height:30px;
list-style-type:none;
}

#globalNavi a{
display: block;
height: 30px;
border-left: 2px solid #999;
color: #1C1D21;
text-align: center;
}

#globalNavi a:hover{
background-color: #B7D68D;
background-position: 0 -80px;
text-decoration: none;
}

こんな感じでどうでしょうか？

お礼

うまくいきました！
思うように作っていくのは
考えていたよりも問題が発生するので大変です。
また質問させていただけたらと思います。
本当に有り難うございました。

回答No.1

metametamu

line-height辺りが怪しい気がしますが・・・
どの部分がずれるのでしょうか？

お礼

cssを貼り忘れました。
#globalNavi{

background-image:url(../menubar.png);
margin-right:0;
height:30px;
font-size:14px;
color: #1C1D21;

text-align:center;

}

#globalNavi a{

float:right;
width:80px;
height:30px;
display:block;
text-align:center;

line-height:normal;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #999;

補足

ありがとうございます！
購入した本をみながら似ているcssをコピーしたところ
(li 要素を削除しました。)
line heightが大きくなる問題はクリアできました。
何故line heightが怪しいと思われたのですか？私は何が悪かったのかもサッパリです。
あとはIEで右にはみ出す問題があります。firefoxではきれいにできています。
このglobalnavi要素の下のコンテンツの幅がIEで小さく表示されているためにずれているという可能性がないとも言えないのですが、確率としては少ないと思っています。