- ベストアンサー
CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 (IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。) しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか? ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 (メニュー項目の数等一部省略しているところがあります。) よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> ~略~ </div>
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
お礼
回答ありがとうございました。 No.1の方の回答にあったoverflow: hidden;の追加にあわせ、背景のポジションを絶対値で指定した所うまくいきました。 text-indent: -9999px;にしているものの、テキストが組み込まれていたため、line-heightとfont-sizeを0にしてしまうのは避けたかったのでとても助かりました。 詳しい記述までどうもありがとうございます。 それから表示結果までチェックしてくださったようで、本当にありがとうございます。 気になっていたIE6でもちゃんと表示されているようで安心しました! "list-style: none; margin: 0; padding: 0;"については記述しています。 投稿用に整理する段階で削除してしまっていたようです。すみません。 いくら調べてみてもわからずすごく困っていたので本当に助かりました。どうもありがとうございました!