- ベストアンサー
リストタグを用いた縦メニューで画像に隙間ができます（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; }
- HTML
- 回答数5
- ありがとう数18
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
メニューはこの部分ですよね？ > <!--左メニュー--> > <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; } を追加してみるとどうなるでしょうか。
その他の回答 (4)
- DrFell
- ベストアンサー率55% (305/551)
まず、原因究明からだと思います。 例えば、 #left img{ border:none; display:block; vertical-align:bottom; } などはイメージには有効ですが、背景には有効ではありません。わかるかな？全然違う指定をしても効くわけ無いです。セレクターの理解を深めることをお奨めします。heightと実際の画像は同じ大きさですか？ ＃4さんもおっしゃっていますが、ｃｓｓの整理をしたほうが問題を見つけやすくなります。 次に、常套手段として、罫線などを使ってボックスがどのように解釈されているか見ます。 *{ border:1px solid red; } li{ background:#ffffee; } などを足してみて表示させると何が問題か浮かび上がりませんか？ 参考にどうぞ http://kennsu.jp/2007/01/css10.html http://css-happylife.com/log/memo/000124.shtml
お礼
回答ありがとうございます。 >全然違う指定をしても効くわけ無いです ですよねぇ。 私もすっきりした頭でみてなんじゃこりゃ？と思いました（苦笑） >などを足してみて表示させると何が問題か浮かび上がりませんか？ これ良いですね。 ぜひ使ってみます。 URLも参考にしてみます。 ありがとうございました。 *追記* 今回原因がよく分からないまま自己解決できましたが、皆さまのアドバイスがあってこそです。 （ためになるアドバイスも聞けましたし） 本職ではない上に社内に聞ける者がいないので本当に助かりました。 お礼もお二方にしか差し上げる事が出来ないのが本当に申し訳ないです。 みなさま、本当にありがとうございました。
- ran_2323
- ベストアンサー率43% (32/73)
隙間ができてしまうのは、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; } とまとめてリセットしておいたほうが、ソースがスッキリして困ったときに原因が見つけやすいです。修正も簡単ですし。 補足までに。
お礼
回答ありがとうございます。 <li>の詰めだけが原因ではなかったようです。 何故だかよく分からないのですが#left_menuのliのマージンを0設定にしたら隙間が埋まりました。 >もっと整理して書いたほうが どうやらそうみたいですね。 実はまとめて指定出来るという事を今回初めて知りました。 本では1個ずつ指定してあった（複雑ではないからなんでしょうが）のでそうするものだとずっと思っていました^^;
- Java-Java
- ベストアンサー率41% (14/34)
>#left{}へ入れるんですよね？ >「hight:1%;」で解消出来ませんでした… <li>のCSSに入れてください。 ですので、今回の場合だと「div#left_menu li」にでしょうか。
お礼
2回もありがとうございます。 試してみたのですが、aの部分がどこかへ行ってしまいました。 他の要素が絡んでるかもしれないのでちょっと他もさがしてみます。
- Java-Java
- ベストアンサー率41% (14/34)
はじめまして、こんにちは。 たぶんですが「height: 1%;」を該当個所に追加してやれば 解決すると思います。 一度おためしください。
お礼
ご回答ありがとうございます。 #left{}へ入れるんですよね？ 「hight:1%;」で解消出来ませんでした…
お礼
>このセレクタは使われません。 あ。 本当ですね…。何を考えていたんでしょう。 ご指摘ありがとうございます。 そうとう頭がパニくってる気がします。 >どんな風に隙間が空くのか ■は画像です。↓ ■ ←ここが本来詰まって上と下の■がくっつく予定なのですが ■ ←ここも ■ というような感じで開いてしまいます。（約3pxほどでしょうか） >追加してみるとどうなるでしょうか。 変化なしでした。 他のところがからんでいるのかもしれないのでまた探してみます。