- 締切済み
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">メニュー1</a></li> <li><a href="menu2.html" class="nav-2" >メニュー2</a></li> <li><a href="menu3.html" class="nav-3">メニュー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)
- 専門家の回答