ie6,7で画像の下に10px程のスペースができ非常に困っています。
色々検索して試してみましたが全く解消されません。
下にhtmlとcssを記述します。

/* html */
<div id="navi">
<ul class="menu">
<li class="m1"><a href="main1.html"></a></li>
<li class="s1"><a href="sub1.html"></a></li>
<li class="dot"></li>
<li class="s2"><a href="sub2.html"></a></li>
<li class="m2"><a href="main2.html"></a></li>
<li class="s3"><a href="sub3.html"></a></li>
<li class="dot"></li>
<li class="s4"><a href="sub4.html"></a></li>
</ul>
</div>

/* css */
#contents #navi ul.menu{
float:left;
margin:10px 0 0 20px;
*margin:10px 0 0 10px;
padding:0;
width:125px;
height:auto;
}

#contents #navi ul.menu li{
margin: 0;
padding: 0;
}

#contents #navi ul.menu li.m1 a {
display: block;
width:115px;
height:45px;
text-indent:-9999px;
background: url(../img/menu_m1.jpg) no-repeat top left;
}

#contents #navi ul.menu li.m1 a:hover {
background-position:0 -45px;
}

m1と同じ記述でm2、s1、s2、s3、s4と続きます。
そして、dotのcssですが、

.dot {
display: block;
margin:0;
padding:0;
width:111px;
height:7px;
background: url(../img/dot.jpg) no-repeat top left;
vertical-align:bottom;
}

です。

色々なサイトを検索して
・liのdisplayをblockからinlineに変更すると下のスペースがなくなる
・border: 1px solid #ffffff ;をつけると下のスペースがなくなる
・-10px入れて上にあげる
など試してみましたが全く解消されません。

やりたいイメージは
m1とm2のメインのカテゴリの中に
s1、s2、s3、s4と分類分けされたカテゴリがあり、その分類の間にdotの画像を入れたいというイメージです。
m1
s1
.....
s2
m2
s3
.....
s4
です。
そのため上記のような表記になったのですが、dotとs2、dotとs4の間に10px程の隙間ができてしまいます。これを解消したいのです。

どなたかお教えいただけたら非常にうれしく思います。
よろしくお願いいたします。

もし説明が足りない場合は言っていただけたら補足いたします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

そもそも、CSSが云々の前に、


そのイメージを書く場合、リストで無意味なdotまんてマークアップはしない。
また、listを空にしてはいけませんって事。
どうしても開けたいのなら、部分的なliにpaddingでもheightでも設定して背景でdotを表示すれば、シンプルに済む話です。

<html>
<head>
<style type="text/css">
#navi .nav { float:left; padding-top: 10px; width:125px;}
#navi .nav ul { margin: 0; padding: 0 0 0 10px; list-style: none;}
#navi li { margin: 0; padding: 0; width:115px; height:45px;}
#navi li a { display: block; width:115px; height:45px; text-indent:-9999px;}
#navi li.m1 a { background: url(../img/menu_m1.jpg) no-repeat;}
#navi li a:hover { background-position: 0 -45px;}
#navi li.dot { height:52px; background: url(../img/dot.jpg) no-repeat 0 100%;}
</style>
</head>
<body>
<div id="navi">
<!-- #naviが不明な為、.navを設置(書き方によっては設置不要) -->
<div class="nav">
<ul>
<li class="m1"><a href="main1.html">main1</a></li>
<li class="s1 dot"><a href="sub1.html">sub1</a></li>
<li class="s2"><a href="sub2.html">sub2</a></li>
<li class="m2"><a href="main2.html">main2</a></li>
<li class="s3 dot"><a href="sub3.html">sub3</a></li>
<li class="s4"><a href="sub4.html">sub4</a></li>
</ul>
</div>
<p style="clear: both;">
※ dot.jpg画像は親要素の背景色と同化か透過か、
親要素と色違いなら115×7px+α程度にするか。</p>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
> listを空にしてはいけませんって事。
listを空にしたのはBBS用に文字数を減らすために消してしまいました。これから投稿する際は変な記述はしないように気をつけます。ご指摘ありがとうございます。

> そのイメージを書く場合、リストで無意味なdotまんてマークアップはしない
とても勉強になります。リストには無意味なイメージを入れたからこういった結果になった訳なんですね。
これからは画像とdotを1つの画像にするなど考慮し、気をつけたいと思います。

web初心者で去年末から独学で始めたので知らないことがまだ山ほどあります。
基本ができてないことがたくさんあるので、こういう風に指摘していただくととても嬉しいです。
回答ありがとうございます。

お礼日時:2011/04/22 12:00

NO.3 naokitaです(お礼拝見済み)


ちょっと返答が気になるので、質問からは脱線しますが・・・
-----------
>リストには無意味なイメージを入れたからこういった結果になった訳なんですね。
<li class="dot"> <img /> </li>の事なら、そうなのですが、
CSSで表示が崩れるのは別の話です(以下で追記)

>これからは画像とdotを1つの画像にするなど考慮し、気をつけたいと思います。
あ、いや、そういう意味だけではなく、
HTML側でリストに項目名以外(dot)がある事自体が問題。
リストだから、
テキストとか音声ブラウザとかHTMLのみとか検索エンジンが読んだら、
例:
 ・リンゴ
 ・みかん
 ・バナナ
 ・ドット線  ← これが項目名だと理解される。
 ・イチゴ
こんな変なテキスト・マークアップになるって事。空白でも変だし。

今回の場合は、
別々のリストに分けるか、途中でCSSでドット用に隙間を作るかの問題。
NO.3の回答は、
既存の項目の下側を伸ばしてCSSで罫線の画像背景を見せてるだけ。
だから、リストとしてのマークアップなので、本来の項目名だけになる。
 ・リンゴ
 ・みかん
 ・バナナ ← CSSでのドットは読まれない。
 ・イチゴ

HTML側で見栄えだけの為にリストに罫線画像を入れない方が良いし、
CSSで表示した方がよいよって意味です。

というか、NO.3回答で表示出来たのかな?  既に理解されていたのなら失礼。
    • good
    • 0
この回答へのお礼

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

naokitaさんが言う様に間違って理解していました。
cssを外して考えたとき、リストの中に「ドット線」が入っているのは確かにおかしいです。

今回1サイトの中に22項目のメニューがあり、バリエーションで8サイトあるので、時間的に全て直すことができなかったのでドットを消すことになりました。

なので、次回同じことを試すときには、ぜひno.3のやり方で試したいと思います。

お忙しい中、何回もお返事いただきありがとうございました。

お礼日時:2011/04/22 18:15

#contents #navi ul.menu li a {


margin: 0;
padding: 0;
}

を追加、、、でしょうか、、、?
未検証です。


HTMLの書き方で、

<li class="m1">
<a href="main1.html"></a>
</li>

このような改行やインデントをしていると、それが影響してスペースが空くことがありますので、
BBS投稿用に改行位置も編集したものであれば、
そういうのを消してみると、解消することがあります。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
検証してみた結果、変化はありませんでした。
<li class="m1">
<a href="main1.html"></a>
</li>
初心者なのでこれで影響がでるということ知りませんでした。
とても勉強になりました。
こういった記述をしないように気をつけます。
ありがとうございます。

お礼日時:2011/04/22 11:21

趣味でWEBページを作成しているものです。


まぁ単純に考えられる原因としては
.dot {
display: block;
margin:0;
padding:0;
width:111px;
height:7px;
background: url(../img/dot.jpg) no-repeat top left;
vertical-align:bottom;     ←わざわざ指定してるよね?
}

わざわざ見え方がおかしく(dot上部の方が広くなる様に指定してますよね?)なるように
指定している為かと??
align:左右方向 vertical-align:上下方向
この表示位置調整用でdotがもってるスペースで下寄せで画像を表示しているので
自ずとdot上部分と下部分の空き具合が変わってきます。
…こういうことですかね?
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
充分な説明ができていませんでした。申し訳ありません。
vertical-align:bottom;
これを指定した理由は
これがなければ
ie6は同じ現象なんですが
ie7ではdotが下に移動してしまい逆に上に10px程開いてしまいます。
他のサイトで検索した結果
vertical-align:bottom;をつけると上のスペースがなくなると記述されていたのでこのようにしたところ上のスペースはなくなったのですが、ie7もie6と同じ様に下にスペースができてしまった。ということです。
十分な説明ができていなくて申し訳ありませんでした。
しかし回答ありがとうございます。

お礼日時:2011/04/22 11:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング