メニューをスタイルシートで設定

質問

画像を使用したメニューをULタグとLIタグで作成し、
スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。
背景色をつけたところ、LIタグに余白がついていることは
確認できたのですが、これをなくす方法が分からずにいます。

HTML-----------------------------------------------------
<UL>
<LI><IMG src="img/img1.gif" width="265" height="21"></LI>
<LI><IMG src="img/img2.gif" width="265" height="21"></LI>
<LI><IMG src="img/img3.gif" width="265" height="21"></LI>
</UL>

CSS-----------------------------------------------------
UL {
list-style-type:none;
margin:0px;
padding:0px;
}
LI {
padding:0px;
margin:0px;
}

アドバイスを頂けると助かります。
どうぞよろしくお願い致します。

回答No.4

partita · ベストアンサー

img {vertical-align:bottom;}

で解決しませんか？

これはＩＥ独自のバグだったと思います。

お礼

vertical-alignで直りました。こんなバグがあったとは・・・。
ご助言いただき感謝致します。ありがとうございました。

回答No.3

DAN55

やり方として適当かどうか不明です。
「取りあえず出来た」程度ですので‥‥。

HTML------------------------------------------------------------
<ul>
<li><img src="img/img1.gif" width="265" height="21"><br></li>
<li><img src="img/img2.gif" width="265" height="21"><br></li>
<li><img src="img/img3.gif" width="265" height="21"><br></li>
</ul>

CSS-------------------------------------------------------------
ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
li {
display: inline;
padding-left: 0;
margin-left: 0;
}
----------------------------------------------------------------

お礼

なんどもご回答頂きましてありがとうございました。
感謝致します。

回答No.2

DAN55

実際、私もスタイルシートで画像を用いUL・LIを使用したメニューを用いていますが、余白は入りませんでした。
私は以下のような感じにしています。（必要部分だけ抜粋）

HTML------------------------------------------------------------
<div id="menu">
<ul>
<li><a href="hogehoge.html"><span>ごにょごにょ</span></a></li>
</ul>
</div>

CSS-------------------------------------------------------------
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu ul li {
width: 130px;
height: 30px;
float: left;
}

#menu ul li a {
display: block;
width: 130px;
height: 30px;
background-repeat: no-repeat;
background-position: 0px 0px;
}

#menu ul li a:hover {
background-position: 0px -30px;
}

#menu ul li a span {
position: absolute;
left: -9999px;
}
----------------------------------------------------------------
a:hover で -30px 指定しているのはマウスオン時の表示用です。

補足

ご丁寧な回答ありがとうございます。
画像を背景として表示するわけですね。参考とさせて頂きます。
ただ、私は画像をHTML内に直接配置しており、この方法に
固執しているわけではないのですが、余白が気になります。
もう少し調べてみたいと思います。

回答No.1

DAN55

全体像が見えないので、的外れな回答になるかも知れませんが、
CSS内の「LI {」は「UL LI {」で定義するのではないでしょうか？

（出来れば、URL があれば……。）

補足

早速書き込んで頂いてありがとうございます。
LI{}に背景色をつけると適用されるので、
スタイルが適用されていないわけではないかと。

LIでmarginもpaddingも0px指定しているのになぜ
画像の下部に余白ができるのか分からない状況です。