IE7で背景画像がテキスト文字幅しか表示されない件

質問

お世話になっております、初めて質問投稿させて戴きます。

表題の件、
ヘッダーナビゲーションを作成しておりますが
ＩＥ７のみリストの背景画像がテキスト文字幅分しか表示されません。
（ＩＥ8以降　firefox googlechormeでは表示されております。）

htmlコード

<div id="nav">
<ul>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
</ul>
</div>

css

#nav{width:950px; height:40px; position:relative; overflow:hidden; clear:both;　margin-left:25px; }
#nav ul{list-style:none; position:relative; left:50%; float:left;}
#nav ul li{float:left; width:150px; height:40px; text-align:center; line-height:40px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; background-color:transparent; background-image:url(image/menu_bcg.png); position:relative; left:-50%; }
#nav ul li a { text-decoration:none; font-size:12px; color:#666; }

こちらのmenu_bcg.pngがＩＥ7のみxxxxxxxの文字幅分しか表示されず、
150pxかける6項目で横幅900pxのナビゲーションを作成したいのですが
短いナビゲーションしか表示できません。

色々と調べているのですが、
ＩＥ７で文字が表示されない、や余白が生まれる、ことを回避する情報はネットに落ちているのですが
文字幅しか表示されないものの回避策が見当たりませんでしたので
こちらへ投稿させて戴きました。

どうぞお力添え戴ければ幸いでございます。

回答No.4

naokita

とりあえず必要部分だけを書く事！　その後に調整として後付けすればよい。

変だと思ったら、width と height を全て指定してみる事！

ul#nav2,ul#nav2 li{margin:0; padding:0;}
ul#nav2{ width:950px; height:40px; list-style:none;}
ul#nav2 li{ float:left; width:150px; height:40px; line-height:40px; background: url(image/menu_bcg.png);}
ul#nav2 li a{ display:block; width:100%; height:100%; text-align:center;}

<ul id="nav2">
<li><a href="">xxxxxxx</a></li>
<li><a href="">xxxxxxx</a></li>
<li><a href="">xxxxxxx</a></li>
<li><a href="">xxxxxxx</a></li>
<li><a href="">xxxxxxx</a></li>
<li><a href="">xxxxxxx</a></li>
</ul>

回答No.3

ORUKA1951

＞上記ご回答戴いた内容についてほとんど理解できておりません。
　それは困りましたね。でも、あなたの書かれたスタイルシートよりも、はるかに簡単だと思います。
#nav{
height:40px;width:90%;/* navブロックの高さと幅を指定しています */
text-align:center;/* 文字をセンター配置--継承されるのでここに */
margin:0 auto;/* 上下のマージンを0,左右は自動調整 */
position:relative;/* 以下の位置やサイズの基準とするため */
min-width:480px;/* ウィンド幅に合わせて伸縮するがこれ以上小さくしない */
line-height:40px;/* 文字を高さの中央に配置するため */
/* font-familyもここで指定しておきましょう */
}
#nav ul,#nav ul li{ /* 同じプロパティを設定するのでセレクタはグループ化 */
display:block;list-style:none;/* リストやリストの項目をブロックにしておく */
margin:0;padding:0;/* リストはブラウザによってmarginやpaddingの初期値が異なるので消しておく */
}
#nav ul li{
float:left; /* 左からつめる */
/* 本来はdisplay:inline-blockなのだがIE6などは対応していないので */
width:16%;/* 直近のstatic以外の親コンテナブロック(#nav)のサイズから */
margin-left:0.5%;/* ユーザビリティのためスペースをあける */
/* 兄弟セレクタが使える新しいブラウザ対象ではli+liだけど */
}
#nav ul li a{
display:block;width:100%;height:100%;
/* aは行内要素なのでblockに変えておく--サイズ指定をするため */
text-decoration:none;
background-color:pink;
/* backgroundの簡易プロパティで背景画像を一緒に指定する。 */
}
#nav ul li a:hover{background-color:yellow;}/* 背景を指定したときはここでも指定する */

　きちんと読んでいけば難しくは無いはずです。それぞれの用語がわからないときは、仕様書を確認すること。
　変なサイトのソースだけをコピペしても応用は利きません。大事なことは理解して使うこと。そのためには最低限仕様書だけは、ざっと読んでおきましょう。始めは難しいですが、いつも見ていたら理解できるようになります。
　学問の王道はありません。

★ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
★値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
　CSS(カスケーディングスタイルシート)においてもっとも大事なのは、このカスケード処理なのですよ。プロパティはその後でよい。カスケーディングがあるから、指示されて使われている。

　頑張ってください。それしかないです。

　まあ、サンプルを試してください。ウィンドウ幅を伸縮させてもきちんと付いてくるはずです。

お礼

ＯＫＷＡＶＥもほとんど使ったことなく、
お礼が遅くなり失礼しました！

なるべく早めに仕様書を読み込む時間をとります。

この度はありがとうございました。

回答No.2

ORUKA1951

なぜ、そんな複雑なCSSを書く必要があるのかわかりません。無駄があまりに多すぎます。
とりあえずリキッドスタイルのサンプルです。スマホでもOKなようにウィンドウ巾が480pxまで対応しています。--現在のように様々な端末が想定される時代・・私は固定デザインはしない。

　固定デザインにするときは、
width:90%;　→ width900px;
width:16%　→　width:148px;
margin\left:0.5%　→　margin-left:2px;
min-width:480pxを削除
する。

　IE5でセンターよりに出来ない以外は、IE5～IE10まで対応しています。他のブラウザでも同様に表示されます。
★ユーザビリティから、リンクの間に必ずスペース(マージン)をとるようにしましょう。
★継承されるプロパティは出来るだけ上位に書いてしまいましょう。
★継承されないプロパティを複数の要素に適用させるときはセレクタをグループ化しましょう。
★無用なプロパティは書かない。overflow:hiddenとか、positio;relativeとか、
　これで随分とわかりやすくなるはず。

　また、必ずstrictで作成し、ウェブ標準で動作するようにすることもブラウザ間の差をなくするポイントです。
→doctype スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.2149.7699.0.8410.13.11.0.2.2.2.500.3062.0j2j6j2j0j1.11.0...0.0.pKZuCLZVEmk&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=e08cbb8e8038c184&biw=1019&bih=628 )

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済みのウェブ標準 HTML4.01strict+CSS2.1です。
　ソース中のタブは＿に置換してあるので戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
#nav{height:40px;width:90%;text-align:center;margin:0 auto;position:relative;min-width:480px;line-height:40px;}
#nav ul,#nav ul li{display:block;list-style:none;margin:0;padding:0;}
#nav ul li{float:left;width:16%;margin-left:0.5%;}
#nav ul li a{display:block;width:100%;height:100%;text-decoration:none;background-color:pink;}
#nav ul li a:hover{background-color:yellow;}
-->
＿</style>
</head>
<body>
＿<h1>サンプル</h1>
<div id="nav">
<ul>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
<li><a href="http://xxxxxxxxxx.net/xxxx/">xxxxxxx</a></li>
</ul>
</div>

</body>
</html>

補足

ORUKA1951さん

ご回答ありがとうございます。

初心者なもので、
上記ご回答戴いた内容についてほとんど理解できておりません。

読み込んでみます。

有難うございます！

回答No.1

LOHA

とりあえず #nav ul li にdisplay: hiddenを加えたらwidth通り表示されるようになりました。
ただし、内部のaのテキストにtext-align: centerが効いてないようです。
＃幅の計算が上手く行ってない模様。

個人的には、メニューのliにはinline-block使うのがお勧めですけどね。
＃IEはinline&zoomで対処

お礼

overflow:hiddenをnav ul liに入れたら画像がきちんと表示されました！

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

※やはり私もtext-align: centerが効いていないので
そこはこれから考えます。。。

補足

LOHAさん

ありがとうございます！

ちなみになんですが、

<#nav ul li にdisplay: hiddenを加えたらwidth通り表示されるようになりました。

これを加える前段階では
私と同じようなwidth通りに表現されない状態でしたでしょうか？

#nav ul li にdisplay: hiddenを加えてみたのですが、
ＩＥ７の表示に変化が見られませんでした・・・

何か私がしでかしているはずなのですが・・・