IE6で隙間ができてしまう

質問

IE6でヘッダーとコンテンツの間に隙間ができてしまいます。
IE7、Firefox、Safariでは問題なく表示されています。

[HTML]
<div id="top">
<div id="topcont">
<h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1>
</div></div>

<div id="navi">
<div id="navicont">
<ul>
<li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li>
<li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li>
<li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li>
</ul>
</div>
</div>

[CSS]
#top {
background: url(img/IIIII.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 80px;
}
#topcont {
background: url(img/III.jpg) repeat-x;
margin: 0px auto;
padding: 0px;
height: 80px;
width: 900px;
}
#navi {
background: url(img/NNN.gif) repeat-x;
text-align: center;
margin: 0px;
padding: 0px;
height: 35px;
}
#navicont {
margin: 0px auto;
padding: 0px;
height: 35px;
width: 900px;
}

隙間を無くすにはどうすればよいのでしょうか。
わかる方いらっしゃいましたら、よろしくお願い致します。

回答No.5

abril · ベストアンサー

> メニュー自体の表示については問題ないのですが、5つのうちの2つのページだけが、<div id="top">～</div>と<div id="navi">～</div>の間にIE6以下で隙間ができるという状態になっています。

2つ、というのはファイル毎で違う、という意味でしたか…ではこれについては忘れます。

> XMLバージョンが抜けてましたね。。

ということはDOCTYPEの前に<?xml version="1.0" encoding="文字コード"?>が挿入されているわけですね。これを挿入した上で、提供して頂いた情報を元にダミー画像を作成し、追加で頂いたbodyとh1 aのスタイルを追加してみましたが、その結果は質問者様とは異なり、以下の様になってしまいました。検証環境はWindows XP上、ブラウザのフォントなどは全てディフォルトのままです。

・IE7.0：<div id="top">～</div>と<div id="navi">～</div>の間は隙間なくくっつく。
・IE6.0：<div id="top">～</div>と<div id="navi">～</div>の間は空く…(A)。
・Firefox2.0～：<div id="top">～</div>と<div id="navi">～</div>の間は空くがIE6.0よりは小さい…(B1)。しかし、<div id="top">の上に余白ができる…(B2)。

(B1)に関しては、
----------------------------------------------------------------------
#navicont ul {
margin: 0;
}
----------------------------------------------------------------------
を追加、
(B2)に関しては
----------------------------------------------------------------------
#topcont h1 {
margin: 0;
}
----------------------------------------------------------------------
を追加することで解消されました。「<div id="navicont">の<UL>,<LI>でCSSの背景画像の移動を利用して、マウスオーバーで下部の背景画像に変わるようにしております。」とレスされているところを見ると、提供されていない#navicont ulという定義が既にあって、そこで上記と同じ結果になる様にスタイルを設定されているのでしょうね。#navicont ulはliをフロートさせて横並び、テキストは表示領域から追いやり背景画像をaで表示、というパターンですね？おそらく…。

ここでようやくIE6だけが隙間ができる(A)、という条件を同じくする事ができました。そこで再度検証した結果、CSSの下記の部分の定義に原因がある様です。
----------------------------------------------------------------------
h1 a {
display:block;
（省略）
text-indent:-9999px;
}
----------------------------------------------------------------------
とありますが、そもそもここの定義の意図がちょっと謎です。<a>自体を"text-indent:-9999px;"で追いやってしまっているので、ここに"display:block;"を定義する意味がわかりません。<a>の中の要素である<img src="img/aaa.gif" alt="AAA画像" width="262" height="80" />と23.5文字のテキストが表示されないので高さを確保したかったのかもしれませんが、親要素である#top及び#topcontで（二重に）"height: 80px;"を定義済みですので、その必要はありませんし。また、実質非表示なのにfont周りをやたらと詳細に設定してあるのも意味不明です。そういう意味では、ここで必要な定義は<h1>～</h1>までを（事実上）非表示にするだけという事になります。であれば、
----------------------------------------------------------------------
h1 a {
display:none;
}
----------------------------------------------------------------------
だけでも済みます。実際、こうするとお悩みの「IE6.0で<div id="top">～</div>と<div id="navi">～</div>の間に隙間があく」という症状は綺麗さっぱり改善されます。オリジナルの設定が何かの意図でどうしても必要であるというのであれば、他のプロパティはそのままにしておいてもまあかまいませんが、"display:block;"だけは"display:none;"に置き換えて下さい。それでもトラブルは解決しますので。

提供された情報で判断できるのはここまでです。

お礼

ご回答ありがとうございました。

----------------------------------------------------------------------
#navicont ul {
margin: 0;
}
----------------------------------------------------------------------
と
----------------------------------------------------------------------
#topcont h1 {
margin: 0;
}
----------------------------------------------------------------------
を追加し、
----------------------------------------------------------------------
h1 a {
display:none;
}
----------------------------------------------------------------------
に変更したところ、隙間がなくなりました！

IE6でのスペースの問題は、まるで存在しなかったかのようにスッキリ解消されました。
ありがとうございました。

回答No.4

abril

> DOCTYPEは、（以下略）

XML宣言なしのパターンですか？
それから、ANo.2の補足要求に対するレスもお願いします。

それから、

> <div id="navicont">のリストでメニューを作っていて実際は<UL>～</UL>に<li>が５つあり、そのうちの２つだけに隙間が空いてしまうという状態になっています。

これはちょっと最初の質問の内容からスライドしてしまっている様に思えますが？質問者様の抱えているトラブルは”<div id="top">～</div>と<div id="navi">～</div>の間にIE6以下で隙間ができる”ということであって、<div id="navicont">内の問題ではなかった筈では？上記はまた別の問題ですか？
だとしても、「<UL>～</UL>に<li>が５つあり、そのうちの２つだけに隙間が空いてしまうという状態」という意味がよくわかりませんが…そもそも、頂いたソースの情報だけで再構成すると、<div id="navicont">内の<ul>はセンタリング状態でテキストがただ並ぶだけで、各<li>どうしの間隔などは何も指定されていないスタイルです。なので、この隙間、というのが実際にはどの部分とどの部分の事を指すのか、イメージできません。

引き続き上記質問に（できるだけ具体的に）補足して下さい。

お礼

ANo.2のレスと前後してしまいました。

XMLバージョンが抜けてましたね。。

> <div id="navicont">のリストでメニューを作っていて実際は<UL>～</UL>に<li>が５つあり、そのうちの２つだけに隙間が空いてしまうという状態になっています。

これはちょっと最初の質問の内容からスライドしてしまっている様に思えますが？質問者様の抱えているトラブルは”<div id="top">～</div>と<div id="navi">～</div>の間にIE6以下で隙間ができる”ということであって、<div id="navicont">内の問題ではなかった筈では？上記はまた別の問題ですか？

<div id="navicont">内で<UL>～</UL>に<li>で５つのメニューを横並びで作っています。全ページにメニューは表示されており、メニュー自体の表示については問題ないのですが、5つのうちの2つのページだけが、<div id="top">～</div>と<div id="navi">～</div>の間にIE6以下で隙間ができるという状態になっています。

わかりづらくてすみません、よろしくお願い致します。

回答No.3

abril

書き忘れました。念の為、DOCTYPEも明らかにして下さい。

お礼

ご連絡ありがとうございます。
DOCTYPEは、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
になります。

<div id="navicont">のリストでメニューを作っていて実際は<UL>～</UL>に<li>が５つあり、そのうちの２つだけに隙間が空いてしまうという状態になっています。

どうぞよろしくお願い致します。

回答No.2

abril

> <div id="top">～</div>と<div id="navi">～</div>との間の事になります。
> IE6、IE5.5だけで隙間ができてしまい、IE7、FirefoxやSafariでは隙間なく表示されています。

#top/#topcont/#naviでbackground-imageで使用されている画像の大きさがわからないので、こちらの環境では替わりにbackground-colorで描画領域を塗り潰して確認してみたのですが、その限りではIE6/IE7/Firefox（IE5.5は考慮に入れていません）では描画領域自体には差がありません。background-repeatの方向がx軸（横方向）だけの様ですが、それは問題ありませんか？
それから、下記の部分についても、"img/AAA.gif"のサイズや（横並びになっている）”AAA”のテキストのボリュームが分からない為、検証条件を揃える事が出来ません。
<h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1>

なので、検証条件をできるだけ質問者様と同一にする為に、以下の情報について補足して下さい。

■下記の各画像のサイズ（WとH）。
img/AAA.gif
img/IIIII.jpg
img/III.jpg
img/NNN.gif
■下記のテキストの文字数（できればバイト数で）。
AAA
■CSSでは親要素（body等）でfont-sizeやline-heightを定義しているか？定義しているのであればその部分。

お礼

ご連絡ありがとうございます。

書き忘れていましたが、<div id="navicont">の<UL>,<LI>でCSSの背景画像の移動を利用して、マウスオーバーで下部の背景画像に変わるようにしております。このことも関係あるのでしょうか…

＞■下記の各画像のサイズ（WとH）。
img/AAA.gif　262px X 80px
img/IIIII.jpg 3px X 80px
img/III.jpg 3px X 80px
img/NNN.gif 1px X 35px
■下記のテキストの文字数（できればバイト数で）。
AAA　全角23.5文字
text-indent:-9999px;で表示しないようにしてます。

h1 a {top.css (98 行目)
display:block;
font-family:"ms pgothic",Arial,Helvetica,sans-serif;
font-size:1em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:80px;
line-height:normal;
margin:0px;
padding:0px;
text-indent:-9999px;
width:900px;
}

■CSSでは親要素（body等）でfont-sizeやline-heightを定義しているか？定義しているのであればその部分。
body {
color:#333333;
font-family:hirakakupro-w3,osaka,"ms pgothic",Arial,Helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin:0px;
padding:0px;
text-align:center;
}

よろしくお願い致します。

回答No.1

abril

> IE6でヘッダーとコンテンツの間に隙間ができてしまいます。
> IE7、Firefox、Safariでは問題なく表示されています。

実際にソースを貼り付けて再構成してみましたが「ヘッダーとコンテンツの間に隙間」ができる、というのが<div id="top">～</div>と<div id="navi">～</div>との間の事でしたら、隙間ができるのはFirefoxであり、IE6.0/7.0はできていない様ですが？
もしそうであれば、CSSに以下の定義を付け加えてみて下さい。
----------------------------------------------------------------------
#topcont h1 {
margin: 0;
}
#navicont ul {
margin: 0;
}
----------------------------------------------------------------------
<h1>や<ul>にはディフォルトの状態でブラウザ依存のマージンが与えられています。それを初期化して0にすると、環境（ブラウザ）による差がなくなります。

お礼

ご回答ありがとうございます。

CSSに以下の定義を追加してみましたが、変わりませんでした。
----------------------------------------------------------------------
#topcont h1 {
margin: 0;
}
#navicont ul {
margin: 0;
}
----------------------------------------------------------------------

「ヘッダーとコンテンツの間に隙間」ができる、というのは
<div id="top">～</div>と<div id="navi">～</div>との間の事になります。

IE6、IE5.5だけで隙間ができてしまい、IE7、FirefoxやSafariでは隙間なく表示されています。

自分で調べ、以下のCSSを追加してみましたが、変わりませんでした。
----------------------------------------------------------------------
img {
vertical-align:bottom;
}
li img {
display:block;
line-height:0pt;
}
a {
line-height:normal;
}
----------------------------------------------------------------------

IE7では隙間ができないので、IE6以前の特有の現象だと思うのですが…
引き続きよろしくお願い致します。