人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: plusgreenst
●カテゴリ:ウェブ制作
✍キーワード:CSS IE WIN XHTML ピクセル
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● lowcarbo
●50ポイント

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>

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

◎質問者からの返答

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


2 ● kanetetu
●30ポイント

http://www.hajimeteno.ne.jp/stylesheet/actually/margin.html#2

CSSの実際のところ - margin

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

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

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

◎質問者からの返答

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


3 ● w405nm
●30ポイント

http://w405nm.no-ip.org/profile/xhtml11.html

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>

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

Another HTML-lint gateway

◎質問者からの返答

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


4 ● chokobo
●0ポイント

.img_banner クラスに

float: left;

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ