WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:外部スタイルシートにすると画像に隙間が

0:[投稿] 篤 [2006/08/05 05:28 ] [環境:IE6 Windows]

いつもお世話になっています。
画像を縦に並べて配置したいと思い、他サイト様を調べたところ
画像をただ並べるとブラウザによって隙間が出ることを知りました。
それの解決策として、
img { margin: 0px; border: 0px;padding: 0px ;vertical-align: bottom ;}
このようなスタイルシートを貼りました。
しかし、これを内部に作った場合は問題ないのですが、
外部にした場合、隙間が生じてしまいます。
その場合、vertical-align: bottom が原因のようです。
このvertical-align:の指定はFireFoxではどうしても必要ですし、また、今後のためにもブラウザごとにシートを分けなくとも解決する方法を知りたいと思っています。
どなったか、解決方法をご存知でしたら、ご教授いただければ幸いです。

内部の場合
http://tanaka.selfip.com/test.html
外部の場合
http://tanaka.selfip.com/


以下コードです。
-----内部の場合------
<html>
<head>
<style type="text">
<!--
img { margin: 0px; border: 0px;padding: 0px ;vertical-align: bottom ;}
// -->
</style>
</head>
<body>
    <img src="img/line.gif" width="780" height="6"><br>
    <img src="img/line.gif" width="780" height="6"><br>
    <img src="img/line.gif" width="780" height="6"><br>
</body>
</html>
-----外部の場合------
<html>
<head>
<link href="base.css" rel="stylesheet" type="text/css">    
</head>
<body>
    <img src="img/line.gif" width="780" height="6"><br>
    <img src="img/line.gif" width="780" height="6"><br>
    <img src="img/line.gif" width="780" height="6"><br>

</body>
</html>

---外部CSS---
img { margin: 0px; border: 0px;padding: 0px ;vertical-align: bottom ;}


1:[回答] m035 [2006/08/05 09:40 ][URL]

<style type="text">
はtext/cssだと思われます。
それと、vertical-align: bottomがあるとIEではかえって隙間が出来ました。
また、FireFoxではvertical-alignがあってもなくても見栄えは変わりませんでした。


2:[回答] 燕雀 [2006/08/05 14:13 ]

回答1でも述べておられるように,vertical-align がなぜ必要なのかわかりません.推測するに,以下のようなことがしたいのですか?

<head>
<link href="base.css" rel="stylesheet" type="text/css">    
</head>
<body>
    <p class="imgstyle"><img src="line5.gif" width="780" height="24">イメージ1説明</p>
    <p class="imgstyle"><img src="line5.gif" width="780" height="24">イメージ2説明</p>
    <p class="imgstyle"><img src="line5.gif" width="780" height="24">イメージ3説明</p>
</body>

---外部CSS---
img {margin:0px;border:0px;padding:0px;vertical-align:bottom}
p.imgstyle {margin:0px;border:0px;padding:0px;}

いずれにしろ,IE は vertical-align での bottom 指定を無視します.具体的にしたいことを言っていただければ,もう少し的確なお答えができるかもしれません.


3:[回答] 篤 [2006/08/05 14:20 ]

燕雀様、m035様
ご回答ありがとうございます。
確かに、IE6では
vertical-align:bottom
はあるだけ困る物みたいですね、
ただ、FireFoxでは、縦に羅列した画像にできる隙間を閉めてくれる
物みたいです。
私も一度この現象は確認していますのでvertical-align:bottomは
残したいと考えています。
再度、質問になってしまいますが、
vertical-align:bottomを残した状態で、
IE6で縦の羅列の時、隙間を生まない方法は無いでしょうか。
何卒宜しくお願いいたします。


4:[回答] 燕雀 [2006/08/05 15:41 ]

どうしてもというのであれば,IE で隙間が発生するのは,vertical-align の指定により img 要素に連続しておかれると予想される文字の高さ分が確保されるためで,これを 0 にすれば良いです.
それぞれの img 要素を p 要素の中に入れれば良いでしょう.

<head>
<link href="base.css" rel="stylesheet" type="text/css">    
</head>
<body>
    <p class="imgstyle"><img src="line5.gif" width="780" height="6"></p>
    <p class="imgstyle"><img src="line5.gif" width="780" height="6"></p>
    <p class="imgstyle"><img src="line5.gif" width="780" height="6"></p>
</body>

---外部CSS---
img {margin: 0px; border: 0px; padding : 0px; vertical-align : bottom}
p.imgstyle {margin: 0px; border: 0px; padding: 0px; font-size: 0px;}

(でも,vertical-align はやっぱりいらないと思います)


5:[回答] 篤 [2006/08/05 18:15 ]

燕雀様、
vertical-align が無ければ、FireFoxでは隙間ができる・・
とどこかで見かけ、また私も一度は確認したのですが、
今再度試そうとしても再現されませんでした・・。
Pを使った解決策、ありがとうございます。
予想される文字の高さ分の確保なので、
はっきりとPを使って文字の高さを示してやるんですね。
これは勉強になりました。

とりあえずvertical-alignは抜きにしてやっていきます。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]