XHTML+CSSレイアウトについて

質問

段組レイアウトで画像を配置しているのですが、画像の上側部分に空白が出来て
しまいます。（IE6で確認すると）
他のブラウザ（Opera+mozila+News)ではきちんと空白が詰めております。

現状で空白を詰めるにはどのようにしたら良いでしょうか？

「具体的なソース」
http://www.geocities.jp/travelxstory/test/test.html
http://www.geocities.jp/travelxstory/test/css001.css
真中のabout画像と上の赤い線の間に空白が出来てしまいます。
勿論、マージン等も設定してIE以外のブラウザではきちんと詰まって表示されます。なぜか上部のaboutだけは正常に空白なしで詰まっております。

現状のXTHML+CSSで画像の空白を詰めるにはどのようにしたら良いでしょうか？

回答No.3

Sakon_sima

No.1です。

No.2さんに答えられてしまいました。
Macでは確認していませんが、No.2さんと同じ結果が出ました。
個人的には<div id="red"></div>という風に間に何もないは好きでないので &nbsp; などを入れたくなりますが・・・

>スタイルシートで背景画像を指定せず、XHTML+CSSでも素直に<img src="">を使った方が良いのでしょうか？

上記に関してですが、いろいろな方がいろいろなことを云っていて、どちらがいいか私にははっきりとした回答を持っていません。申し訳ありません。ただ、JIS化と云うことから考えたら、別にすべてを背景画像にする必要はないような気がしています。
また、同じCSSをいろいろなページで使用して画像とテキストを変更して生成する場合は当然、画像は背景画像では扱わないでしょうし・・・・・・・。
これも個人的な趣味ですが、各ページの専用の画像はテキストと同じように扱いたい・・・・です。

お礼

ご丁寧にどうもありがとうございました。
とても助かりました。

回答No.2

koutarou504

<div id="red"></div>
ここが１文字分の高さがとられています。
高さの指定も１文字分以上だと有効の様ですが、それ以下には出来ない様で・・・。
背景画像は影響してはいなかった様です。指定をはずしても１文字分の高さはあいかわらず・・・。

という事で、font-size:1px; を追加すれば問題ないと思います。（一応、Windows XP SP2 IE6 では検証しました。）

#red {
width: 749px;
background-image: url(images/head_line.gif);
background-repeat: no-repeat;
height: 3px;
clear: both;
font-size:1px;
}

お礼

ご丁寧にどうもありがとうございました。
とても助かりました。

回答No.1

Sakon_sima

こんにちは

test.htmlの25行目の <div id="red"></div> ですが、この間に高さ3pxの透過Gifなどがはいると、空白がなくなります。
<div></div>の間に何もない場合に高さは文字のデフォルトの高さ（body にfont-size:12pxがあるので12pxかな？）になってしまうような感じだと思います。

CSSでは、#redは height:3pxとなっていますが、IE6には反映されないようですね・・・・

補足

ご回答の方、有難う御座います。
おかげさまでredimgを挿入する事で無事解決されました。

ここで少し疑問に思ったのですが、<div id="red></div>画像はスタイルシートの背景画像で指定していたのですが、このような場合は、スタイルシートで背景画像を指定せず、XHTML+CSSでも素直に<img src="">を使った方が良いのでしょうか？

その辺の知識があいまいです・・・
また先ほどの例でredに画像を挿入する事で解決されましたが、スタイルシートのみで背景画像として指定されている場合に解決方法は御座いますでしょうか？font12pxが適用されるといわれましたが、こちらを解除しても空白は解決されませんでした。

どうかお願い致します。