ベストアンサー

VALIGN="bottom" IE7とSafariで表示が違います

2008/05/06 23:18

一つのページにコンテンツを並べるために、２つのコンテンツを大きなテーブルでくくるというやり方をしています。右のコンテンツは上寄せに、左のコンテンツは下寄せにしたくて VALIGN="bottom" というタグを左に記述しています。しかし確認してみるとIE７ではどちらも上寄せに、Safariでは右コンテンツは上寄せ、左は下寄せで、IE7では何故か反映されません。因みにOSはWindows　Vistaです。 MacのLeopardでも確認してみましたが、Safariしか持っていないので変わりませんでした。 IEのバグなら、何か他のやり方はないでしょうか？とても困っています。

c0c0_
お礼率61% (13/21)

HTML
回答数8
ありがとう数4

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2008/05/08 16:48 回答No.8

ばらばらとすみません、書き忘れました。先程の結果はIE6.0上のみです。質問者様はIE7.0がメインでしたでしょうか？ IE7.0やFirefoxなどでは、先程の定義でIE6.0上と同様の表示結果を得る為には、DTD宣言がURLなしのタイプになっていないとだめみたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> あまり推奨されない記述ですが、ないよりはマシかと。

質問者

お礼 2008/05/08 18:49

最後まで本当にありがとうございます！全て試してみて、全体のレイアウトをCSSに置き換える、という結果になりました。やはりIEでの下寄せは無理ですね。IEだけはどうしても反映されてくれません。（この部分に table.main td.hoge2 table { border-collapse: collapse; width: 70%; height: 70%;　←これを入れないと希望通りではないので…入れるとSafari等では完全に希望通りですが、IEで質問当初と同じ問題が起きるようです；）一体何がいけないのかもう分かりませんが…； Firefox（先ほどインストールして来ました）とSafariで下寄せが出来ていれば十分かと思うようになりました。こんなにお時間を割いて頂いたのに、申し訳ありませんでした。どうも有り難うございました！

その他の回答 (7)

abril
ベストアンサー率69% (388/560)

2008/05/08 16:42 回答No.7

> このページはブラウザの可変に合わせた縦横伸縮でしたので（2の補足ソース参照）「外枠テーブル」の高さがウィンドウサイズに合わせて目一杯で拡大縮小するパターンでなければいけなかったのですね。もしそれだけなら： ---------------------------------------------------------------------- 【common.css】 ---------------------------------------------------------------------- body { height: 100%;←追加（以下省略） } ---------------------------------------------------------------------- でOKです。最後に試してみてはいかがですか。

abril
ベストアンサー率69% (388/560)

2008/05/08 14:58 回答No.6

下記で「左」と仰っているのは「右」のことですよね？（左は「外枠のテーブル」の”左のセル”に直に画像が入ってるだけですから） ↓ > 外枠と左のテーブル（インラインフレーム込み）の縦の伸縮が、ソースをいじっても出来ません；問題はそこだけでした。 > （左のテーブルは縦が固定幅になっているようなのですが、これはどこで指定しているのでしょうか；下で削った後でも変わりませんでした…）「外枠のテーブル」は、内包する左セルの画像の縦サイズによって自動的に伸縮します。なので「外枠のテーブル」の高さは： ---------------------------------------------------------------------- 【sample.html】 ---------------------------------------------------------------------- <td class="hoge1"> <img src="hoge1.gif" alt="画像非表示の代替テキスト" width="300" height="300"> <p>※左コンテンツ※</p> </td> ---------------------------------------------------------------------- の<img>のheight属性の値が大きくなれば伸びますし、小さくなれば縮みます。また、「右のテーブルは縦が固定幅になって」はいません。現状は、<iframe>の描画エリアの高さを何も指定していない時のディフォルトの状態です。なので、「右のテーブル（インラインフレーム込み）の縦の伸縮」がしたければ： ---------------------------------------------------------------------- 【common.css】 ---------------------------------------------------------------------- （※ファイルの一番最後） table.main td.hoge2 iframe { width: 100%; } ---------------------------------------------------------------------- に、適当なheightの値を追加して下さい。例えば、<iframe>の描画エリアの高さを300pxにしたければ、 ---------------------------------------------------------------------- table.main td.hoge2 iframe { width: 100%; height: 300px; } ---------------------------------------------------------------------- として下さい。ここの値はお好みの整数で増減して下さい。先の回答でも書きました通り（IE6.0で表示できる様に）単位は「%」ではなく「px」で。これで、<iframe>を囲む「右のテーブル（インラインフレーム込み）」の高さが<iframe>の高さに合わせて伸びます。

質問者

お礼 2008/05/08 16:00

左右を間違えておりました；すみません… このページはブラウザの可変に合わせた縦横伸縮でしたので（2の補足ソース参照）、pxですと固定になりやはり駄目なようです。 IEで下寄せに表示出来ないだけで、伸縮等はIE6でも反映されているようですし、この辺りで諦めておこうと思います。貴重なお時間を割いて頂き、本当にどうも有り難うございました。感謝致します。

abril
ベストアンサー率69% (388/560)

2008/05/08 01:32 回答No.5

すみません、ANo.4の訂正です。 --------------------------------------------------------------------- 【common.css】 --------------------------------------------------------------------- /* ================= basic : elements ================= */←この部分はコメントですので不要です。削除して下さい。それから、<iframe>の周りを装飾する為の、内側の<table>の方は、ボーダーレスの方が良いのですよね。であれば、 table.main td.hoge2 table { （省略） } この次に table.main td.hoge2 table td { border: none; } を追加挿入しておいて下さい。

質問者

補足 2008/05/08 13:24

何度も本当に有難うございます…。提供して下さったソースで試してみたのですが、思うように行きませんでした。外枠と左のテーブル（インラインフレーム込み）の縦の伸縮が、ソースをいじっても出来ません；問題はそこだけでした。（左のテーブルは縦が固定幅になっているようなのですが、これはどこで指定しているのでしょうか；下で削った後でも変わりませんでした…）しかし「左コンテンツだけを下寄せにする」という当初の希望は叶えられましたので、全体の記述を置き換えるのではなく、ここの部分だけCSSで、というようにしたいのですが、出来ますでしょうか？ common.cssとsample.htmlを該当の部分以外削って、他を改変前に戻してみました。ですが、こうしても縦伸縮が出来ませんでした。本当に何度も申し訳ありません…。次で解決出来なかった場合は、このデザインは諦める事に致します。

abril
ベストアンサー率69% (388/560)

2008/05/07 18:43 回答No.4

> DTD宣言ですが、何も書いておりません； > 以前調べてみたのですが、自分がどういったHTMLの書き方をしているのかがそもそも分からず、放置しておりました。 …そうですか。先ずDTD宣言がないとHTML文書として始まりませんので必ず内容に相応しい宣言を付けて下さい。今回は<iframe>を使用していますのでStrictにはできませんので、HTML4.01 Transitionalで記述してみましょう。 > CSSに関してもよく分かっておりません（すみません…）。 > そこで一括で纏められるならチャレンジしてみたいのですが、似たような事例を挙げて説明しているサイトが見つけられません； > 正直ちんぷんかんぷんです。うーん、そうなると説明は難しいですね。なので、 > 先ほど補足したソースがほぼ全てなのですが、これからどうしたらよいでしょうか？今回は多分ご希望に添えるのではないかという様な（使用されている画像のサイズや性質、<iframe>内で表示されるコンテンツの内容等の詳細がわからない為、あくまで推測です）HTMLとCSSのサンプルをちょっと書いてみました。詳細の説明は省きますので、ご自分でおいおい調べて勉強してみて下さい。各画像のファイル名やパスはオリジナルに合わせてありますので、とりあえずこのままコピペして下されば表示結果が確認できると思います。 sample.html、a.html、common.css、hoge1.gif、hoge2_back.gif、1.gif～8.gifがフォルダ分けされることなく全て同一の階層に直に置かれていると想定しています。・（オリジナルのソースからして）全体はリキッドレイアウトと想定。・今回はオリジナルに近いソースにする為敢えてtableレイアウトで組んであります。・左コラムは内包する画像"hoge1.gif"の幅一杯で固定。仮に300pxとする。ここはHTML側で実際の画像サイズに（<img>のwidth属性の値を）変えてくれれば自動的にコラム幅は広がります。高さも同じく適当ですが、右コラムが下揃えになっているのがわかりやすい様に、仮に300pxとしてあります。ここも実際の画像サイズに合わせて（<img>のheight属性の値を）変えて下さい。・右コラムは残りの領域で幅一杯に描画。ただし内包される<iframe>の幅は常にコラムに対して70%とする。 --------------------------------------------------------------------- 【sample.html】 --------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="common.css" type="text/css" rel="stylesheet" media="all"> <title>サンプル</title> </head> <body>  <table class="main" cellspacing="0" cellpadding="0" border="0" summary="メインコンテンツ"> <tr>  <td class="hoge1"> <img src="hoge1.gif" alt="画像非表示の代替テキスト" width="300" height="300"> <p>※左コンテンツ※</p> </td>   <td class="hoge2">  <table cellspacing="0" cellpadding="0" border="0" summary="hoge2レイアウト"> <tr> <td class="corner"><img src="1.gif" alt="左上" width="48" height="48"></td> <td class="bar_top"> </td> <td class="corner"><img src="2.gif" alt="右上" width="48" height="48"></td> </tr> <tr> <td class="bar_left"> </td> <td> <iframe src="a.html" scrolling="auto" frameborder="0" title="a.htmlの内容表示">この部分の表示にはiframeタグを使用しています。ご覧のブラウザは非対応となっています。お手数ですが<a href="a.html">a.htmlの内容表示</a>を直接ご覧下さい。</iframe> </td> <td class="bar_right"> </td> </tr> <tr> <td class="corner"><img src="3.gif" alt="左下" width="48" height="48"></td> <td class="bar_bottom"> </td> <td class="corner"><img src="4.gif" alt="右下" width="48" height="48"></td> </tr> </table>  <p>※右コンテンツ※</p> </td>  </tr> </table>  </body> </html> --------------------------------------------------------------------- 【common.css】 --------------------------------------------------------------------- /* ================= basic : elements ================= */ body { font-size: 12px; color: #000000; background: #ffffff; padding: 0; margin: 1em; } th, td { font-size: 12px; color: #000000; } div, p, th, td, dl, ul, ol { line-height: 140%; } div, p { margin: 0; } table.main { width: 100%; height: 100%; border-collapse: collapse; } table.main th, table.main td { border: solid 1px #000000; padding: 0; } table.main td.hoge1 { vertical-align: top; } table.main td.hoge2 { width: 100%; text-align: center; vertical-align: bottom; } table.main td.hoge2 table { border-collapse: collapse; width: 70%; background: url(hoge2_back.gif) left top repeat; margin: 0 auto; } table.main td.hoge2 table td.corner { width: 48px; height: 48px; } table.main td.hoge2 table td.bar_top { background: url(5.gif) left top repeat; } table.main td.hoge2 table td.bar_left { background: url(6.gif) left top repeat; } table.main td.hoge2 table td.bar_right { background: url(7.gif) left top repeat; } table.main td.hoge2 table td.bar_bottom { background: url(8.gif) left top repeat; } table.main td.hoge2 iframe { width: 100%; } --------------------------------------------------------------------- ・今回はビギナー向けに全てclassセレクタ（"table.main"であれば".main"の様に、ピリオドで付けられた名称が、HTML側のタグから参照される「class="main"」に呼応します）で定義してあります。classセレクタの名称は適当ですので、必要に応じて任意のものに（HTML側の参照部分とセットで）変更して下さい。・同様の理由で、省略できるところをわざと省略せずに記述してある箇所もあります。・<iframe>のスタイルに高さを100%と定義するとIE6.0では何も表示されなくなってしまう様ですので、ここは値を特に定義しないかあるいは"height: 200px;"という感じでCSS側でピクセル単位で指定してみて下さい。とりあえず、これで試して見て下さい。イメージ通りでない様なら具体的に補足して下さい。

abril
ベストアンサー率69% (388/560)

2008/05/07 15:24 回答No.3

> 以下に問題の出る部分だけを記述致します。ソースを貼り付けてこちらの環境上で再構成してみましたが、<iframe>の解釈がDTD宣言によってレイアウトの解釈が異なる様です。確かにオリジナルのソースのままだと、IEのみ、右側セルの子要素の<iframe>の部分の表示がおかしな様に見えていますが…どういうDTD宣言をされているかも補足して下さい。ちなみに<iframe>にcellspacing, cellpaddingという属性はありませんので不要です。 ※蛇足ですが、デザイン的要素の扱いが、従来のタグの属性によるものとstyle属性によるものとが混在している様ですが、どうせstyle属性を使用するならCSSとしてまとめられた方がメンテナンスしやすいと思いますので、機会があればチャレンジする事をお奨めします。

質問者

補足 2008/05/07 15:59

素早いご回答、どうも有り難うございます！ cellspacing, cellpaddingの部分は削除致しました。よく分からずにつけておりました…。 DTD宣言ですが、何も書いておりません；以前調べてみたのですが、自分がどういったHTMLの書き方をしているのかがそもそも分からず、放置しておりました。 CSSに関してもよく分かっておりません（すみません…）。そこで一括で纏められるならチャレンジしてみたいのですが、似たような事例を挙げて説明しているサイトが見つけられません；正直ちんぷんかんぷんです。先ほど補足したソースがほぼ全てなのですが、これからどうしたらよいでしょうか？何度もお手を煩わせてしまい、大変申し訳ありません！もう少しお付き合い頂けますでしょうか。宜しくお願い致します。

abril
ベストアンサー率69% (388/560)

2008/05/07 12:58 回答No.2

> 右のコンテンツは上寄せに、左のコンテンツは下寄せにしたくてVALIGN="bottom"というタグを左に記述しています。 CSSは使用されていないのですよね。右のコンテンツ（セル<td>）にはvalign="top"と記述していますか？もしvalign属性を何も記述していなければ、ディフォルトはvalign="middle"の為、右は上揃えではなく中央揃えになっている筈です。この場合、同じ行の左右のセルにコンテンツを振り分けている為、それぞれの内包する実際のデータ量によって、valign属性を指定していたとしても表示結果は異なります。例えば右より左のデータ量が多ければ左は事実上セルの高さ一杯に表示されているだけなので、「下寄せ」には見えません。逆に左より右のデータ量が多ければ今度は右が「上寄せ」には見えません。ただし、それぞれのセルにheightの値が指定されている様な場合はまた別ですが。 > しかし確認してみるとIE７ではどちらも上寄せに、Safariでは右コンテンツは上寄せ、左は下寄せで、IE7では何故か反映されません。いずれにせよ、ちょっと上記のコメントだけでは意味もよくわからないところもあり、判断材料が不足しています。実際のソースを提供して下されば原因がわかるかもしれません。

質問者

補足 2008/05/07 14:19

こんにちは。ご回答どうも有り難うございます。説明不足で申し訳ありません…。ソースですが、かなりめちゃくちゃな書き方になっているかと思います。ページの内容ですが、左コンテンツは画像、右コンテンツにテーブルでくくったインラインフレームを表示させています。以下に問題の出る部分だけを記述致します。 <TABLE BORDER="1" style="height:100%;"> <TR><TD VALIGN="top"> ※左コンテンツ※ </TD> <TD VALIGN="bottom" ALIGN="center" style="width:100%;"> <table cellspacing=0 cellpadding=0 style="width:70%;height:70%;border:none;background-image:url('');"> <Tr> <td style="width:48; height:48;"><img src="1.gif" alt="左上" style="width:48; height:48;"></Td> <Td style="background-image:url('5.gif');"></Td> <td style="width:48; height:48;"><img src="2.gif" alt="右上" style="width:48; height:48;"></Td> </Tr><Tr> <Td style="background-image:url('6.gif');"></Td> <Td style="width:100%; height:100%;"> <iframe src="A.html" cellspacing=0 cellpadding=0 style="width:100%;height:100%;border:none;" name="B"></iframe> </Td> <Td style="background-image:url('7.gif');"></Td> </Tr><Tr> <td style="width:48; height:48;"><img src="3.gif" alt="左下" style="width:48; height:48;"></Td> <Td style="background-image:url('8.gif');"></Td> <td style="width:48; height:48;"><img src="4.gif" alt="右下" style="width:48; height:48;"></Td> </Tr> </Table> </TD></TR> </TABLE> 両コンテンツをくくっているテーブルに、文字だけを一言記述して表示させてみると、希望道理になっていました。左コンテンツも問題はありませんでしたので、右コンテンツの記述がおかしいのだと思います。お手数おかけ致しまして、申し訳ありません。どうぞよろしくお願い致します…。

kuzumiHK
ベストアンサー率72% (132/183)

2008/05/06 23:35 回答No.1

普通に指定する限りでは、VistaのIE7でも普通に反映されました。別の何かが影響しているかもしれません。 <table width="300"> <tr> <td width="50%" VALIGN="top">あああああああああああああああああああああああああああ</td> <td width="50%" VALIGN="bottom">いいいいい</td> </tr> </table>

質問者

お礼 2008/05/09 00:42

遅くなってしまいましたが、ご回答どうも有り難うございました！そこまで気が回らなく、他の記述では試していませんでした。別の何かが影響しているかもしれないとヒントを頂けた事で、色々と考えることが出来ました。どうも有難うございました！

VALIGN="bottom" IE7とSafariで表示が違います