IE以外のブラウザで隙間ができる

質問

お世話になっております。
上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。

<table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat">
<tr><td height="30">&nbsp;</td></tr>
<tr><td>ここに文字を入れています</td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>
<div class="test"><br>
<table width="758" border="0" cellpadding="0" cellspacing="0">
<tr><td>ここも文字</td></tr>
</table>
</div>

上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので)
これが問題なのかと思い、divタグを消してみたりしましたがだめでした。

div"test"のCSSは
.test{
margin:0px;
padding:0px;
background-color:#333333;
border-bottom:solid 1px #999999;
width:758px;
height:262px;
}

としています。
本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。

回答No.3

abril · ベストアンサー

> Opera9.10、Safari3.1.1、Firefox2で空いていました。全てWin XPです。

当方、上記の全ての環境でサンプルを検証してみましたが、結果は他の回答者の方と同じで、提供されている情報の範囲では、何れの環境でも「上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができて」という現象は起こりませんでした。
gazou.jpgはW758×H160のダミーを作成し、CSS、テーブル部分は質問文からそのまま抜き出し、HTML4.01 Strict、XHTML1.0 Transitional、XHTML 1.1（XML宣言付／宣言無しどちらも）の4ヴァージョンで試して見ましたが、結果は同じでした。

こうなると、質問者様自ら「もしかしてここに書いたタグ以外の部分が問題なのでしょうか？」と問われている通り、その可能性が高いかと思われます。
一度、HTMLもCSSも質問文で提供された情報だけの状態にして、他の部分を全部削除して検証されてみてはいかがですか？それで不具合が起きなくなるのであれば、原因が他の（マークアップやスタイル設定）部分にあると言う事が確実になるでしょう。

それから、蛇足ですが、せっかくCSSを導入されているのであれば、tableのスタイル（幅・高さ・背景画像等）もCSSで設定した方がHTML文書としてより適切ですっきりしたものになりますが？
例えば、上の方のtableだったら、オプションは
<table class="hoge" border="0" cellpadding="0" cellspacing="0">
だけにし、CSS側で対応するclassセレクタを設定して

table.hoge {
width: 758px;
height: 160px;
border-collapse: collapse;
background: url(../image/gazou.jpg) no-repeat;
}

とでもすれば、OKなわけですから。

お礼

abrilさん、ご回答ありがとうございます。
結論から言ってしまうと、解決できました！abrilさんを含め皆さんのおかげです。

＞一度、HTMLもCSSも質問文で提供された情報だけの状態にして、他の部分を全部削除して検証
やってみましたら皆さんのご指摘通り隙間はなく、他の部分に原因があることが分かりました。
最初から自分で試してみるべきでした…。すみません。

結果、ミスは単純なものでお恥ずかしいですがご報告として書かせていただくと
<table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat">
<tr><td height="30">&nbsp;</td></tr>
<tr><td>ここに文字を入れています</td></tr>
<tr><td height="30">&nbsp;</td></tr>
</table>

「ここに文字を入れています」の文字サイズを大きいものにしていたので、セルからはみ出していたんです。
余白がほしかったので30pxのセルを上下に入れてたんですが、テーブルの高さは変えず、この余白を24pxまで小さくしたところ文字がセル内に収まったようで、どのブラウザでも隙間が消えました。

こういうことで隙間ってできていくんですね。勉強になりました。初歩的なことなのでしょうが、おかげさまで今後はこういったミスに注意できます。

それからテーブルのスタイルのこともご指導下さりありがとうございます。全く知りませんでした…。早速使わせていただきます。

今後とも精進したいと思いますのでどうぞよろしくお願いします。
abrilさんをはじめ皆さんわざわざ検証してくださったり、感謝の気持ちでいっぱいです。長くなりましたがありがとうございました。

回答No.2

rukuku

はじめまして

＞IE以外のブラウザで
上手く表示されないブラウザを教えてください。
FireFox3で試した結果では、隙間は空きませんでした。

<table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat">
ここで、テーブルの高さを指定していますが、image/gazou.jpgの高さはいくつでしょうか？
また、
style="background-repeat:no-repeat
を外したらどのように表示されますか？

お礼

rukukuさん、はじめまして。ご回答ありがとうございます。

わざわざお試しいただきありがとうございます。

＞上手く表示されないブラウザを教えてください。
Opera9.10、Safari3.1.1、Firefox2で空いていました。全てWin XPです。でもFirefox3で隙間がないということはもしかしてここに書いたタグ以外の部分が問題なのでしょうか？

＞image/gazou.jpgの高さはいくつでしょうか？
160pxです。

＞style="background-repeat:no-repeatを外したらどのように表示されますか？
外してみても相変わらず隙間が空いていて空いた隙間部分に画像がリピートされています…。

もう少し見直してみます。また何か思い当たることがございましたらお教えいただけると助かります。
どうもありがとうございました。

回答No.1

noname#105044

<div class="test"><br>の<br>を消してもだめでしょうか？

お礼

OrangeGumi様、ご回答ありがとうございます。
<br>は必要な改行だったので空けていたのですが、消してみました。でもダメでした…。変わらず隙間が空いています。困りました…。
もしまた何かご意見があればお教えいただけると嬉しいです！ご回答ありがとうございました。