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

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

解決済みの質問

リストタグを用いた縦メニューで画像に隙間ができます(IE6)

いつも皆さまには助けていただきありがとうございます。
さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。
IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。(本当は隙間なくしたい)
こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。
#left img{
border:none;
display:block;
vertical-align:bottom;
}
と入れたんですが、記入がおかしいでしょうか?
色々調べてみましたが、これ以上どういじって良いのかよく分かりません。
一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。
よろしくお願いします。
【HTML】
<html>
<head>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
<title>タイトル</title>
</head>
<body>
<div id="container">
<!--ヘッダー部分-->
<div id="header">
<div id="headerImg" title="タイトル">
</div><!--id:headerImgEnd-->
<div id="headerMenu">
<ul>
<li></li>
<li></li>
<li></a></li>
</ul>
</div><!--headerMenuEnd-->
</div><!--id#headerEnd-->
<div id="contents">
<!--左メニュー-->
<div id="left">
<div id="left_menu">
<ul>
<li><a href="a.html" id="a" title="a">a</a></li>
</ul>
<ul>
<li id="b" title="b"></li>
<li><a href="c.html" id="c" title="c"></a></li>
<li><a href="d.html" id="d" title="d"></ul>
</div><!--id:left_menuEnd-->
</div><!--id:leftEnd-->
<!--メイン-->
<div id="main">
</div><!--mainEnd-->
<!--フッター-->
<div id="footer">
</div><!--id:containerEnd-->
</div>
</body>
</html>
【CSS】
body{
margin:0;
padding:0;
text-align:center;
font-size:14px;
}

#container{
margin:0 auto;
width:800px;
text-align:left;
borer:solid 1px #999;
}

#header{
width:800px;
}

div#headerImg{
width:800px;
height:138px;
background-image:url(img/title.gif);
background-color:#00FFcc;
}

div#headerMenu{
width:800px;
}

#contents{
width:800px;
}

/*左メニュー*/
#left{
float:left;
width:180px;
}

#left_menu ul{
list-style:none;
padding:0;
margin:0;
}

#a{
background-image:url(../img/a.gif);
width:180px;
height:69px;
display:block;
margin-top:0px;
margin-left:0px;
}

#b{
background-image:url(../img/b.gif);
background-repeat:no-repeat;
width:180px;
height:30px;
display:block;
margin-top:0px;
margin-left:0px;
}

#c{
background-image:url(../img/c.gif);
background-repeat:no-repeat;
width:180px;
height:25px;
list-style:none;
display:block;
margin-top:0px;
margin-left:0px;
}

a#c:hover{
background-image:url(../img/c02.gif);
background-repeat:no-repeat;
}

#d{
background-image:url(../img/d.gif);
background-repeat:no-repeat;
width:180px;
height:24px;
list-style:none;
display:block;
margin-top:0px;
margin-left:0px;
}

a#d:hover{
background-image:url(../img/d02.gif);
background-repeat:no-repeat;
}

/*メイン*/
#main{
float:right;
width:620px;
margin:-14px 0 0 0;
}

/*フッター*/
#footer{
clear:both;
width:800px;
height:47px;
}

投稿日時 - 2008-06-27 12:50:25

QNo.4132985

すぐに回答ほしいです

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

メニューはこの部分ですよね?

> <!--左メニュー-->
> <div id="left">
> <div id="left_menu">
> <ul>
> <li><a href="a.html" id="a" title="a">a</a></li>
> </ul>
> <ul>
> <li id="b" title="b"></li>
> <li><a href="c.html" id="c" title="c"></a></li>
> <li><a href="d.html" id="d" title="d"></ul>
> </div><!--id:left_menuEnd-->
> </div><!--id:leftEnd-->

<img>がありませんので、
> #left img{
> (略)
> }
このセレクタは使われません。
文法も正しいですし、おかしくもありません。ただ使われないだけです。

ところで、heightが#a、#b、#cでそれぞれ違うのはOKですか?


検証できる環境がない、、、わけではないのですが、IE6環境を起動させたりとか面倒なので、
どんな風に隙間が空くのか推測ですが、

#left li a{
margin:0;
padding:0;
}

を追加してみるとどうなるでしょうか。

投稿日時 - 2008-06-27 14:35:08

お礼

>このセレクタは使われません。
あ。
本当ですね…。何を考えていたんでしょう。
ご指摘ありがとうございます。
そうとう頭がパニくってる気がします。

>どんな風に隙間が空くのか
■は画像です。↓

 ←ここが本来詰まって上と下の■がくっつく予定なのですが

 ←ここも

というような感じで開いてしまいます。(約3pxほどでしょうか)
>追加してみるとどうなるでしょうか。
変化なしでした。
他のところがからんでいるのかもしれないのでまた探してみます。

投稿日時 - 2008-06-27 15:48:01

ANo.2

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

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

回答(5)

ANo.5

まず、原因究明からだと思います。
例えば、
#left img{
border:none;
display:block;
vertical-align:bottom;
}
などはイメージには有効ですが、背景には有効ではありません。わかるかな?全然違う指定をしても効くわけ無いです。セレクターの理解を深めることをお奨めします。heightと実際の画像は同じ大きさですか?

#4さんもおっしゃっていますが、cssの整理をしたほうが問題を見つけやすくなります。

次に、常套手段として、罫線などを使ってボックスがどのように解釈されているか見ます。
*{
border:1px solid red;
}
li{
background:#ffffee;
}
などを足してみて表示させると何が問題か浮かび上がりませんか?

参考にどうぞ
http://kennsu.jp/2007/01/css10.html
http://css-happylife.com/log/memo/000124.shtml

投稿日時 - 2008-06-28 01:10:08

お礼

回答ありがとうございます。

>全然違う指定をしても効くわけ無いです
ですよねぇ。
私もすっきりした頭でみてなんじゃこりゃ?と思いました(苦笑)

>などを足してみて表示させると何が問題か浮かび上がりませんか?
これ良いですね。
ぜひ使ってみます。
URLも参考にしてみます。
ありがとうございました。

*追記*
今回原因がよく分からないまま自己解決できましたが、皆さまのアドバイスがあってこそです。
(ためになるアドバイスも聞けましたし)
本職ではない上に社内に聞ける者がいないので本当に助かりました。
お礼もお二方にしか差し上げる事が出来ないのが本当に申し訳ないです。
みなさま、本当にありがとうございました。

投稿日時 - 2008-06-30 10:55:25

ANo.4

隙間ができてしまうのは、IE6のみということでよかったでしょうか??
<li>要素と<li>要素を連続して記述記述、もしくは以下のようにしてみてください。IE6はどうもリストの改行に余計なスペースが入ってしまったりするようなので…。

<ul>
<li>メニューA</li><li>メニューB</li>...
</ul>
または、
<ul><!--
--><li>メニューA</li><!--
--><li>メニューB</li><!--
--></ul>

あと考えられる対処法をいうと、
background-image:url(../img/a.gif);
の部分にそれぞれポジション指定をしてやること。
background:url(../img/a.gif) 0 0;
私がいつも気をつけている点だけ書かせていただきました。
試してみてくださいね。

気になったことを追加させていただくと、CSSの指定の仕方がまどろっこしくなっている気がします。もっと整理して書いたほうがいいかと思います。
たとえば
#a~#dのmarginは全部同じ指定だし、paddingなども不要ですよね。
#left_menu ul,
#left_menu ul li{
list-style:none;
padding:0;
margin:0;
}
とまとめてリセットしておいたほうが、ソースがスッキリして困ったときに原因が見つけやすいです。修正も簡単ですし。
補足までに。

投稿日時 - 2008-06-27 19:58:24

お礼

回答ありがとうございます。
<li>の詰めだけが原因ではなかったようです。
何故だかよく分からないのですが#left_menuのliのマージンを0設定にしたら隙間が埋まりました。

>もっと整理して書いたほうが
どうやらそうみたいですね。
実はまとめて指定出来るという事を今回初めて知りました。
本では1個ずつ指定してあった(複雑ではないからなんでしょうが)のでそうするものだとずっと思っていました^^;

投稿日時 - 2008-06-30 10:48:47

ANo.3

>#left{}へ入れるんですよね?
>「hight:1%;」で解消出来ませんでした…

<li>のCSSに入れてください。
ですので、今回の場合だと「div#left_menu li」にでしょうか。

投稿日時 - 2008-06-27 14:35:32

お礼

2回もありがとうございます。
試してみたのですが、aの部分がどこかへ行ってしまいました。
他の要素が絡んでるかもしれないのでちょっと他もさがしてみます。

投稿日時 - 2008-06-27 15:51:53

ANo.1

はじめまして、こんにちは。

たぶんですが「height: 1%;」を該当個所に追加してやれば
解決すると思います。

一度おためしください。

投稿日時 - 2008-06-27 13:49:47

お礼

ご回答ありがとうございます。
#left{}へ入れるんですよね?
「hight:1%;」で解消出来ませんでした…

投稿日時 - 2008-06-27 14:11:49

あなたにオススメの質問