xhtml + css 検証をお願いします。画像の配置で win 版の ie 対応で困っています。

2つの画像を全てのブラウザで間に隙間なく上下に並べたいのですが、win 版の ie では各画像の下に高さ3ピクセルのスペースが入ってしまうので、css のどの部分を修正したら良いか教えてください。
http://210.143.106.91/~jp132/test/

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/05/24 11:48:07
  • 終了:--

回答(4件)

id:lowcarbo No.1

lowcarbo回答回数25ベストアンサー獲得回数02004/05/24 12:05:21

ポイント50pt

2つめの画像に...

 .img_banner_plus {

 margin: 5px 0 0 0;

 padding: 0;

 }

が指定されているのは、その通りでよいのかな?

 margin: 0;

としたほうがよいと思います。

また、

 <p>

 <img>

 </p>

 <p>

 <img>

 </p>

と書くよりも、

 <p><img></p><p><img></p>

とワンラインで書くか、

 <p><img>

<img></p>

と書いたほうがよいと思ったり。

id:plusgreenst

ビンゴでした、ありがとうございました!

2004/05/24 12:18:49
id:kanetetu No.2

kanetetu回答回数2199ベストアンサー獲得回数112004/05/24 12:07:10

ポイント30pt

言わずと知れた段落を意味する「P要素」。これは一般的に改行と1行の空行を含んでしまいます。日本語環境ではこのしきたりを嫌がって、BR要素などで強制的に改行したりします。が、HTMLの文法を無視しないためにはDIV要素などで別のブロックレベル要素を補完する必要があります。

こんな面倒なことをする人は殆どいないのでしょうが、それでは文法違反です。やっぱりうまくP要素とつき合う方が良いわけで、その方法をCSSで提供できるのです。

サンプルのように、マージンを「0」とすることで、改行は入るものの、1行の空行は消えてしまいます。普通の(あまり複雑でない)HTML構造をしていれば、IE5、NC4.6共に正常に表示できるので効果的です。

id:plusgreenst

参考になるサイトを教えていただき、ありがとうございました。

2004/05/24 12:20:50
id:w405nm No.3

w405nm回答回数19ベストアンサー獲得回数02004/05/24 12:13:41

ポイント30pt

XHTMLのタグの間に改行コードが入っているの原因と考えられます。

p 要素と img 要素を続けて書いてみてください。

<p class=”image”><img src=”_images/image.gif” width=”350” height=”50” alt=”画像” class=”img_banner” /></p>

<p class=”image”><img src=”_images/image.gif” width=”350” height=”50” alt=”画像” class=”img_banner” /></p>

id:plusgreenst

ありがとうございます、勉強になりました。

2004/05/24 12:21:23
id:chokobo No.4

chokobo回答回数34ベストアンサー獲得回数42004/05/24 12:13:59

.img_banner クラスに

float: left;

をいれてあげる、というのでは、応急措置すぎます?

id:plusgreenst

改行コードの修正で OK でした、ありがとうございます。

2004/05/24 12:22:33

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません