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:"ＭＳ Ｐゴシック", 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>
お礼
ありがとうございます。 ご指摘の方法では解決出来ず、とあるページで見つけた「a要素に指定するfloat:leftを、li要素に一括指定する」ってのをやってみたら、”階段現象”は解決出来ました。 あとは、背景とピクセル単位で合致させる作業なのですが・・・ やはりWindows7以外のIEでは正常に表示出来ず、もうどうしたら良いのやら・・・ とりあえず、一番の問題点は解決出来ましたので、この質問はクローズします。 ありがとうございました。