みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2009-02-13 03:39:30

QNo.4713047

すぐに回答ほしいです

質問者が選んだベストアンサー

サンプル文書で検証してみました。
もし、「line-height: 140%;という一行を削除」しないままだと、ul#menu li aに"overflow: hidden;"を追加しただけではご希望通りの結果は得られない様です。ANo.1様のご指摘の通り、font-sizeやline-heightの影響でliの高さとして想定している10pxよりも実際のレンダリング領域が広がっています。
ul#menu liに"line-height: 0;"や"font-size: 0;"を指定しないで(本件は実際にはテキストが組み込まれているので背景画像が表示されない時の事を考慮します)おくなら、"overflow: hidden;"に加え、各background-positionの指定方法を絶対値に変えると上手く行く様です。

ul#menu li a{
(省略)
overflow: hidden;←追加
}
ul#menu li a:link,
ul#menu li a:visited{
background-position: 0px 0px;←変更
}
ul#menu li a:hover,
ul#menu li a:active{
background-position: 0px -10px;←変更
}

IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chromeでの表示結果ではいずれも問題ありませんでした。

ちなみに、CSS中には記述が省略されていた様ですが、ulは予め"list-style: none; margin: 0; padding: 0;"でリストスタイルや余白がリセットされているのですよね?じゃないと今回の問題以外のレイアウトの崩れが起きる筈なので。

投稿日時 - 2009-02-13 10:43:05

お礼

回答ありがとうございました。
No.1の方の回答にあったoverflow: hidden;の追加にあわせ、背景のポジションを絶対値で指定した所うまくいきました。
text-indent: -9999px;にしているものの、テキストが組み込まれていたため、line-heightとfont-sizeを0にしてしまうのは避けたかったのでとても助かりました。
詳しい記述までどうもありがとうございます。

それから表示結果までチェックしてくださったようで、本当にありがとうございます。
気になっていたIE6でもちゃんと表示されているようで安心しました!

"list-style: none; margin: 0; padding: 0;"については記述しています。
投稿用に整理する段階で削除してしまっていたようです。すみません。

いくら調べてみてもわからずすごく困っていたので本当に助かりました。どうもありがとうございました!

投稿日時 - 2009-02-13 23:50:14

ANo.2

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(2)

IEのバグの一つに、「中身がでっかいと勝手にボックスのサイズを
拡張する」ってのがあります。また、overflow属性の初期値は
visibleなので、ボックスからはみ出した画像が見えてもいいっての
もあります。

今回はおそらく、高さ10pxのボックスにサイズ10ptのテキストを詰
め込んでline-heightを140%にしているので、IEのバグによりボック
スが広がっていると思います。Windowsの10ptは13pxですし、その
140%なら行の高さは18pxありますね。line-heightを変えると見え方
が変わるってんならほぼビンゴだと思います。

ul#menu li a に、overflow: hiddenを追加してみて下さい。

投稿日時 - 2009-02-13 09:55:49

お礼

回答ありがとうございました。
overflow: hiddenを追加し、No.2の方の回答を参考に背景のポジションを絶対値で指定した所うまくいきました。

>Windowsの10ptは13pxですし、その140%なら行の高さは18pxありますね。
な、なるほどー!すごく納得しました!
背景画像が全部表示されてしまうのならまだわかるのですが、ジャスト20px分見えるわけではなかったので、
なんでこんな中途半端に表示されるんだろうと謎だったのです。
なおかつ140%の指定を消しても10pxよりちょっと多く表示されたのは、
fontが10ptに指定されていたからだったのですね。
とても勉強になりました。本当にありがとうございました。

投稿日時 - 2009-02-13 23:42:17

あなたにオススメの質問