- ベストアンサー
ie6,7で画像の下に10px程のスペースができる
- ie6,7で画像の下に10px程のスペースができ非常に困っています。色々検索して試してみましたが全く解消されません。
- liのdisplayをblockからinlineに変更すると下のスペースがなくなる、border: 1px solid #ffffff ;をつけると下のスペースがなくなる、-10px入れて上にあげるなど試してみましたが全く解消されません。
- m1とm2のメインのカテゴリの中にs1、s2、s3、s4と分類分けされたカテゴリがあり、その分類の間にdotの画像を入れたいというイメージです。dotとs2、dotとs4の間に10px程の隙間ができてしまいます。これを解消したいのです。
- rossi46mail
- お礼率96% (251/260)
- CSS
- 回答数4
- ありがとう数6
- みんなの回答 （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>
その他の回答 (3)
- naokita
- ベストアンサー率57% (1008/1745)
NO.3 naokitaです（お礼拝見済み） ちょっと返答が気になるので、質問からは脱線しますが・・・ ----------- ＞リストには無意味なイメージを入れたからこういった結果になった訳なんですね。 <li class="dot"> <img /> </li>の事なら、そうなのですが、 CSSで表示が崩れるのは別の話です（以下で追記） ＞これからは画像とdotを１つの画像にするなど考慮し、気をつけたいと思います。 あ、いや、そういう意味だけではなく、 HTML側でリストに項目名以外（dot）がある事自体が問題。 リストだから、 テキストとか音声ブラウザとかHTMLのみとか検索エンジンが読んだら、 例： ・リンゴ ・みかん ・バナナ ・ドット線 ← これが項目名だと理解される。 ・イチゴ こんな変なテキスト・マークアップになるって事。空白でも変だし。 今回の場合は、 別々のリストに分けるか、途中でCSSでドット用に隙間を作るかの問題。 NO.3の回答は、 既存の項目の下側を伸ばしてCSSで罫線の画像背景を見せてるだけ。 だから、リストとしてのマークアップなので、本来の項目名だけになる。 ・リンゴ ・みかん ・バナナ ← CSSでのドットは読まれない。 ・イチゴ HTML側で見栄えだけの為にリストに罫線画像を入れない方が良いし、 CSSで表示した方がよいよって意味です。 というか、NO.3回答で表示出来たのかな？ 既に理解されていたのなら失礼。
お礼
回答ありがとうございます。 naokitaさんが言う様に間違って理解していました。 cssを外して考えたとき、リストの中に「ドット線」が入っているのは確かにおかしいです。 今回１サイトの中に２２項目のメニューがあり、バリエーションで８サイトあるので、時間的に全て直すことができなかったのでドットを消すことになりました。 なので、次回同じことを試すときには、ぜひno.3のやり方で試したいと思います。 お忙しい中、何回もお返事いただきありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
#contents #navi ul.menu li a { margin: 0; padding: 0; } を追加、、、でしょうか、、、？ 未検証です。 HTMLの書き方で、 <li class="m1"> <a href="main1.html"></a> </li> このような改行やインデントをしていると、それが影響してスペースが空くことがありますので、 BBS投稿用に改行位置も編集したものであれば、 そういうのを消してみると、解消することがあります。
お礼
回答ありがとうございます。 検証してみた結果、変化はありませんでした。 <li class="m1"> <a href="main1.html"></a> </li> 初心者なのでこれで影響がでるということ知りませんでした。 とても勉強になりました。 こういった記述をしないように気をつけます。 ありがとうございます。
- abacabu
- ベストアンサー率37% (250/663)
趣味で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上部分と下部分の空き具合が変わってきます。 …こういうことですかね？
お礼
回答ありがとうございます。 充分な説明ができていませんでした。申し訳ありません。 vertical-align:bottom; これを指定した理由は これがなければ ie6は同じ現象なんですが ie7ではdotが下に移動してしまい逆に上に10px程開いてしまいます。 他のサイトで検索した結果 vertical-align:bottom;をつけると上のスペースがなくなると記述されていたのでこのようにしたところ上のスペースはなくなったのですが、ie7もie6と同じ様に下にスペースができてしまった。ということです。 十分な説明ができていなくて申し訳ありませんでした。 しかし回答ありがとうございます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
回答ありがとうございます。 > listを空にしてはいけませんって事。 listを空にしたのはBBS用に文字数を減らすために消してしまいました。これから投稿する際は変な記述はしないように気をつけます。ご指摘ありがとうございます。 > そのイメージを書く場合、リストで無意味なdotまんてマークアップはしない とても勉強になります。リストには無意味なイメージを入れたからこういった結果になった訳なんですね。 これからは画像とdotを１つの画像にするなど考慮し、気をつけたいと思います。 web初心者で去年末から独学で始めたので知らないことがまだ山ほどあります。 基本ができてないことがたくさんあるので、こういう風に指摘していただくととても嬉しいです。 回答ありがとうございます。