- 締切済み
CSS、IE6-7で要素が消えてしまいます。
CSS初心者です。 過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！ お願い致します。 当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。 シンプルな構造のページのはずなのですが、以下の HTML / CSS で リストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { width: 100%; text-align: center; position: absolute; bottom: 30px; } #nav { position: static; width:700px; height: 50px; text-align:left; margin:0px auto; } html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float:left; width: 140px; } #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; } #nav ul li a:hover { color: #000; background-position: bottom; } .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いやはや・・・なんでそんな複雑なHTMLやCSSになるのか?? カスケーディングスタイルシートのカスケーディングを使ってないし、デザインのためだけのclass名やid・・・。HTMLのマークアップは文書構造にしたがって。class名も一般的なものを--どんなクラス名が良いかはHTML5の要素名を見ればわかります。 HTML <body> ＿<div class="section"> ＿＿<div class="header"> ＿＿</div> ＿＿<div class="article"> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> とかでよい。【タブはアンダーバーに置換してある】 CSSは、 div.section div.nav, div.section div.nav ul, div.section div.nav ul li{margin:0;padding:0;} div.section div.nav ul, div.section div.nav ul li{display:block;list-style:none;} div.section div.nav{position:absolute;top:0;left:0;height:30px;} div.section div.nav ul{ margin-left:auto;margin-right:auto;width:730px;} div.section div.nav ul li{width:140px;float:left;text-align:center;line-height:30px;margin-left:5px;} div.section div.nav ul li a{display:block;text-decoration:none;width100%;height:100%;background-color:gray;} div.section div.nav ul li a:visited{color:blue;} div.section div.nav ul li a:focus, div.section div.nav ul li a:hover{color:magenta;} div.section div.nav ul li a:active{color:green;} とか・・・・ hover,activeなどの指定はご自由に・・・。プルダウンなども追加できます。 後でわかりやすいように、セレクタはグループ化し、同じ宣言は繰り返さないようにすると良いでしょう。この程度のCSSで長々と羅列すると、メンテナンスのとき大変です。スクロールしなくても設定のすべてが見渡せることは重要です。 テストしてませんから微調整が必要です。また、IE6以下にも対応させるならdiv.navをbody直下に置いたほうが良いかもしれません。 古いIEは、サイズやposition指定時の基準を「自分を包む直近のstatic以外のブロックを参照する」に従わない重大なバグがありますから・・
- noris02
- ベストアンサー率74% (56/75)
とりあえず、 #wrap { height:400px; width: 100%; ←height変更 background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { width: 100%;height:50px; ←height追記 text-align: center; position: absolute; bottom: 30px; } にしてみて、表示されるか試してみて。 以下関係なさそうだけどメモ 1、#nav ul li a { 内 text-indent:-9999; を画面内にいれて云々 2、absolute＋floatのバグは 関係なさそうな気がするんだけど念のため 対処は <br style="clear:both">
