タブ（画像）とすぐ下のケイ線をすき間なくくっつけたいが、できません

質問

タブ（画像）とすぐ下のケイ線をすき間なくくっつけたいが、できません

役に立った：2件

質問者：pb353578
投稿日時：2008/10/29 11:24
困り度：

ホームページビルダーでサイトを作っています。

タブ（画像）と、すぐ下のケイ線をくっつけたいのです。しかしできません。
すき間が空いてしまいます。

これが現況です。
http://homepage2.nifty.com/queensroad/

ここにあるオレンジ色のタブ「コレクション１」の画像と、下の同じ色のケイ線を
すき間なくくっつけたいのです。
しかし、できません。

検索したところ、すでに似たご質問に次のようなものがありましたが、
私の場合は解決できません。
http://okwave.jp/qa3023427.html

私のページでの現在までのやりかたはこうです。

・２行１列の表をつくり、１行目にタブの画像を置きました。
・２行目は、「スタイルの設定」→「レイアウト」→「ボーダー」で
　２ピクセルの実線を同じオレンジで入れこれをケイ線としました。
・タブとケイ線をくっつけるため、
　１行目の「コレクション１」の画像を、
　「スタイルの設定」→「レイアウト」→「下方向」の「マージン」を
　「－５ピクセル」にしました。

すると、ホームページビルダーの「ページ編集」画面上では
タブの下とケイ線が見事くっついたのですが、
「プレビュー」やアップロードしてIE7で見てみると、
「コレクション１」の画像の下が欠けていて、すき間が空いています。
「-6　PIXEL」「-7　PIXEL」にしていくと、タブの下がどんどん欠けていくだけで
すき間は同じ間隔だけ空いたままです。

それでは、と、下のケイ線を「スタイル」→「レイアウト」で、
「上」の「マージン」を「－５ピクセル」にしたりしましたが
何の変化もありません。

どのようにすればタブと下のケイ線はくっつけられるでしょうか。

そもそも、表の1行目にタブ（画像）を置いて2行目のセルのケイ線を組み合わせる、
というやりかた自体が間違っていて、
もっと「標準的な」というか「王道」の、ほかのやり方があるのでしょうか。

なにとぞアドバイスをお願いいたします。

この質問への回答は締め切られました。

回答(3件)

No.3

回答者：yudachi_12
回答日時：2008/10/29 18:54

No.1です。
あ、すみません、私の書き方が悪かったです。
『margin-bottom』を削除というのは、『margin-bottom: -5px;』を削除してくださいということでした。ごめんなさい！

あと、No.2の方が解説してくださったように、タブ画像を入れているテーブルを修正すると、私の方だとIEで隙間がなくなりました。

通報する

この回答へのお礼

再度のアドバイスありがとうございます。
NO.2の方がおっしゃったようにしましたらできました。
<table cellpadding="0" width="100%" border="0" cellspacing="0">
に加えて、画像の下のマージンを
「margin-bottom: -4px;」としたらすき間がなくなりました。

＞『margin-bottom』を削除というのは、『margin-bottom: -5px;』を削除してくださいということでした。

ありがとうございます。
「margin-bottom: -4px;」の代わりに「vertical-align: bottom;」を入れてみました。それでもすき間がなくなり解決しました。

大変ありがとうございました！

No.2ベストアンサー20pt

回答者：sno_ow
回答日時：2008/10/29 17:21

<table cellpadding="0" width="100%" border="0" cellspacing="0">
としてみてはどうですか？

通報する

この回答へのお礼

できました！
アドバイスありがとうざいます。
こちらがすき間がなくなった現況です。

http://homepage2.nifty.com/queensroad/

またリンク先のサイトも今後役立ちそうです。
いいものをお教えいただきましてありがとうございます。

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

No.1ベストアンサー10pt

回答者：yudachi_12
回答日時：2008/10/29 15:50

初めまして。

Firefoxで確認してみたところ、画像の欠けが確認できなかったので、「おや？」と思ったんですが、確かにIEだと欠けていますね。
恐らく、Firefoxでは画像がテーブルの上に乗っかった状態で、下の余白を調整しているのに対して、IEだと画像がテーブルの下に潜りこむ状態で、下の余白を調整しているんだと思います。

まず、タブ画像のスタイルから『margin-bottom』を削除し、代わりに『vertical-align: bottom;』を追加してみてください。
元々画像は、デフォルトの状態では下に余白が空く仕組みになっています。（詳しくは省略）
上記のスタイルを加えると、「画像を下に揃える」ことになり、デフォルトの余白がなくなります。
あと、タブ画像を入れているテーブルに『cellpadding="0"』を追加してみてください。
これで、セル内の余白がなしになります。
恐らく文字を入れているセルも、文字が周りの罫線にぴっちりくっ付いてしまうと思うので、tdのスタイルに『padding:任意の数値px;』を追加してみてください。

通報する

この回答への補足

はじめまして。ご回答たいへんありがとうございます。

アドバイスどおりやってみましたが、できません。

アドバイスをいただく前の段階ではHTMLはこのようになっています。
-----------------------
<TBODY>
<TR>
<TH align="left" width="742" colspan="5">
<IMG src="collection1.gif" width="100" height="20" border="0" style="margin-bottom : -5px;">
</TH>
</TR>
<TR>
<TD style="border-width : 2px 2px 2px 2px;border-style : solid solid solid solid;border-color : #feca01 #feca01 #feca01 #feca01;" colspan="5" background="oji ">
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
-----------------------
これを、アドバイスにしたがって修正しました。

「タブ画像のスタイルから『margin-bottom』を削除し、
代わりに『vertical-align: bottom;』を追加」をやりました。
下のようにしましたが、これでＯＫでしょうか？

-----------------------
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TH align="left" width="742" colspan="5">
<IMG src="collection1.gif" width="100" height="20" border="0" style="vertical-align: bottom : -5px;">
</TH>
</TR>
<TR>
<TD style="border-width : 2px 2px 2px 2px;border-style : solid solid solid solid;border-color : #feca01 #feca01 #feca01 #feca01;" colspan="5" background="oji ">
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
文字入れる<BR>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
-----------------------

もうひとつ、
「タブ画像を入れているテーブルに『cellpadding="0"』を追加」は、上の1行目の<TABLE width="100%" border=0>を、<TABLE width="100%" border=0 cellpadding="0">にしました。

しかし、すき間が埋まりませんでした。入れるところが間違っていますか？
このHTMLでアップしたのでご覧いただけますでしょうか？
http://homepage2.nifty.com/queensroad/

重ねての質問すみませんが、よろしくお願いいたします。